main.js

别人的 ext工具 大家可以研究一下很不错 需要大家继续完善

Main = function() {
};

Main.prototype = {

	init: function() {

		Ext.QuickTips.init();

		this.idCounter = 0;
		this.autoUpdate = true;

		this.cookies = new Ext.state.CookieProvider();

		this.initLayers();

		this.initFormPanel();
		this.initTreePanel();
		this.initEditPanel();

		this.viewport = new Ext.Viewport({
			layout : 'border',
				items: [{
					region  : 'north',
					title   : 'Gui Builder',
					height  : 52,
					tbar    : [{
						text : 'New form',
						scope: this,
						handler:function() {
							Ext.Msg.confirm("Confirmation",
								"Loose all form information and start a new one ?",
								function(b) {
									if (b == 'yes') {
										this.newForm();
									}
								}, this);
						}
					},{
						text:'Show/Edit JSON',
						scope:this,
						handler:this.editConfig
					},{
						text:'Get Values',
						scope:this,
						handler:function() {
							var v = this.formPanel.form.getValues();
							var str = "";
							for(k in v) {
								str += "<li>" + k + " : " + v[k] + "</li>";
							}
							var w = new Ext.Window({
								title       : 'form getValues() result',
								width       : 300,
								height      : 200,
								autoScroll  : true,
								closeAction : 'close',
								modal       : true,
								html        : str
							});
							w.show();
						}},'-',{
							xtype    : 'checkbox',
							boxLabel : 'Auto Update',
							id       : 'AutoUpdateCB',
							tooltip  : 'Auto update the form if checked. Disable it if rendering is too slow',
							checked  : this.autoUpdate
						},'-',{
								text    : 'Rendering time : <i>unknown</i>',
								scope   : this,
								id      : 'RenderingTimeBtn',
								tooltip : 'Click to update form and display rendering time',
								handler : function() {
									this.updateForm(true);
								}
						},'->',{
							text : 'Help',
							handler: function() {
								Ext.Msg.alert('Informations',
									"Select a node, then add elements or modify attributes.<br/>" +
									"Hover on attributes name to get documentation.<br/>" +
									"Right click on the form to select elements.<br/>" +
									"<i>Author : Christophe Badoit (extjs a t tof2k d o t com)</i><br/>" +
									'Source : <a href="js/main.js">main.js</a> <a href="js/cfg.js">cfg.js</a>');
							}
						}
					]
				},
				{
					region: 'west',
					width : 350,
					split : true,
					xtype : 'panel',
					layout: 'border',
					items : [
						this.treePanel,
						this.editPanel
					]
				},
				this.formPanel
				]
			});

			Ext.ComponentMgr.get('AutoUpdateCB').on('check', function(c) {
				this.autoUpdate = c.checked;
			}, this);

			this.treePanel.el.on('contextmenu', function(e) {
				e.preventDefault();
			});

			if (!this.loadConfigFromCookies()) { this.newForm(); }

			// select elements on form with right click
			this.formPanel.el.on('contextmenu', function(e,el) {
					e.preventDefault();
					var search = 0;
					var node = null;
					var target = null;
					while (search < 10) {
//                        node = this.treePanel.getNodeById(el.id);
						target = Ext.ComponentMgr.get(el.id);
						if (target && target._node) {
							node = target._node;
							break;
						}
						el = el.parentNode;
						if (!el) { break; }
						search++;
					}
					if (!node) { node = this.treePanel.root; }
					this.treePanel.expandPath(node.getPath());
					node.select();
					this.highlightElement(node.fEl.el);
					this.setCurrentNode(node);
				}, this);
	},

	// the tree panel, listing elements
	initTreePanel : function() {
		var tree = new Ext.tree.TreePanel({
			region          : 'center',
			autoScroll      : true,
			width           : 200,
			split           : true,
			animate         : false,
			enableDD        : true,
			containerScroll : true,
			selModel        : new Ext.tree.DefaultSelectionModel(),
			tbar            : [
				'Add :',
				{text:'TF' , tooltip: "Add a text field"   , value:'textfield' , handler:this.addPreset , scope:this} , 
				{text:'TA' , tooltip: "Add a text area"    , value:'textarea'  , handler:this.addPreset , scope:this} , 
				{text:'CB' , tooltip: "Add a combobox"     , value:'combo'     , handler:this.addPreset , scope:this} , 
				{text:'R'  , tooltip: "Add a radio button" , value:'radio'     , handler:this.addPreset , scope:this} , 
				{text:'C'  , tooltip: "Add a checkbox"     , value:'checkbox'  , handler:this.addPreset , scope:this} , 
				'-'        , 
				{text:'FS' , tooltip: "Add a fieldset"     , value:'fieldset'  , handler:this.addPreset , scope:this} , 
				{text: "Layouts &amp; Containers", menu: { items: [
					{text:'Columns', scope:this, handler: function() {
						Ext.Msg.prompt('New Column Layout', 'Number of columns :',
							function(b, text) {
									if (b != 'ok' || text <= 0) { return; }
									var c = {layout:'column',items:[]};
									for (var i = 0; i < text; i++) {
										c.items.push({layout:'form'});
									}
									this.appendConfig(c);
								}, this);
						}},
					{text:'Tab Panel', scope:this, handler: function() {
						Ext.Msg.prompt('New Tab Panel', 'Number of tabs :',
							function(b, text) {
									if (b != 'ok' || text <= 0) { return; }
									var c = {xtype:'tabpanel',activeTab:0,items:[]};
									for (var i = 0; i < text; i++) {
										c.items.push({layout:'form',title:'Tab '+(i+1),autoHeight:true});
									}
										this.appendConfig(c);
									}, this);
							}},
						{text:'Border Layout', scope:this, handler: function() {
								var w = new Ext.Window({
									layout:"fit",
									width:350,
									title:"New Border Layout",
									items:[{
										layout:'form',
										xtype:'form',
										frame:true,
										items:[{
												layout:"column",
												defaults:{
													hideLabels:true
												},
												items:[{
														layout:"form",
														defaultType:"checkbox",
														title:"Region",
														defaults:{
															height:25
														},
														items:[{
																boxLabel:"Center",
																name:"active_center",
																checked:true,
																disabled:true
															},{
																boxLabel:"North",
																name:"active_north"
															},{
																boxLabel:"South",
																name:"active_south"
															},{
																boxLabel:"East",
																name:"active_east"
															},{
																boxLabel:"West",
																name:"active_west"
															}]
													},{
														layout:"form",
														defaultType:"textfield",
														title:"Title",
														defaults:{
															height:25
														},
														items:[{
																name:"title_center"
															},{
																name:"title_north"
															},{
																name:"title_south"
															},{
																name:"title_east"
															},{
																name:"title_west"
															}]
													},{
														layout:"form",
														defaultType:"checkbox",
														title:"Split",
														defaults:{
															height:25
														},
														items:[{
																name:"split_center",
																disabled:true
															},{
																name:"split_north"
															},{
																name:"split_south"
															},{
																name:"split_east"
															},{
																name:"split_west"
															}]
													},{
														layout:"form",
														defaultType:"numberfield",
														title:"Size",
														defaults:{
															height:25,
															width:50
														},
														items:[{
																name:"size_center",
																disabled:true
															},{
																name:"size_north"
															},{
																name:"size_south"
															},{
																name:"size_east"
															},{
																name:"size_west"
															}]
													}]
											}]
									}]
								});
								w.addButton({
									text:'Ok',
									scope:this,
									handler:function() {
										window.w = w;
										var values = w.items.first().getForm().getValues();
										values['active_center'] = 'on';
										var c = {layout:'border',items:[]};
										var regions = 'center north south east west'.split(' ');
										for (i=0;i<regions.length;i++) {
											var r = regions[i];
											var sizeName = (r == 'north' || r == 'south' ? 'height' : 'width');
											if (values['active_'+r]) {
												var item = {
													layout : 'form',
													region : r,
													title  : values['title_'+r],
													split  : values['split_'+r] == 'on'
												};
												item[sizeName] = values['size_'+r];
												c.items.push(item);
											}
										}
										this.appendConfig(c);
										w.close();
									}
								});
								w.show();
							}}
						]}}
					],
				bbar            : [{
					text    : 'Add',
					tooltip : 'Add a new element under the selected one',
					scope   : this,
					handler : function() {
						var n = this.appendConfig({});
						this.treePanel.expandPath(n.getPath());
						n.select();
						this.setCurrentNode(n);
				}
			},{
				text    : 'Remove',
				tooltip : 'Remove the selected element',
				scope   : this,
				handler : function() {
					this.removeNode(this.treePanel.getSelectedNode());
				}
			},'-',{
				text    : 'Expand All',
				tooltip : 'Expand all elements',
				scope   : this,
				handler : function() { this.treePanel.expandAll(); }
			},{
				text    : 'Collapse All',
				tooltip : 'Collapse all elements',
				scope   : this,
				handler : function() { this.treePanel.collapseAll(); }
			},'-',{
				text    : 'Update form',
				tooltip : 'Apply changes to the form',
				scope   : this,
				handler : function() { this.updateForm(true); }
			}]
		});

    var root = new Ext.tree.TreeNode({
        text      : 'GUI Builder elements',
				id        : this.getNewId(),
        draggable : false
    });
		root.fEl = this.formPanel;
		root.elConfig = this.formPanel.initialConfig;
		this.formPanel._node = root;
    tree.setRootNode(root);

		tree.on('click', function(node, e) {
			e.preventDefault();
			this.hideLayers();
			if (!node.fEl || !node.fEl.el) { return; }
			this.highlightElement(node.fEl.el);
			this.setCurrentNode(node);
			window.node = node; // debug
		}, this);

		// clone a node
		var cloneNode = function(node) {
				/*
				var attribs = Ext.apply({}, node.attributes);
				attribs.id = this.getNewId();
				var newNode = new Ext.tree.TreeNode(attribs);
				var config = node.elConfig || {};
				if (config.id) {
					//try to increment
					var num = config.id.match(/\d+$/);
					if (num) { config.id = config.id.replace(/\d+$/, parseInt(num[0])+1); }
					else { config.id += '2' }
				};
				newNode.elConfig = config;
				delete newNode.fEl;
				for(var i=0; i < node.childNodes.length; i++){
					n = node.childNodes[i];
					if(n){ newNode.appendChild(cloneNode(n)); }
				}
				return newNode;
			*/
			var config = Ext.apply({}, node.elConfig);
			delete config.id;
			var newNode = new Ext.tree.TreeNode({id:this.getNewId(),text:this.configToText(config)});
			newNode.elConfig = config;

			// clone children
			for(var i = 0; i < node.childNodes.length; i++){
				n = node.childNodes[i];
				if(n) { newNode.appendChild(cloneNode(n)); }
			}

			return newNode;
			
		}.createDelegate(this);

		// copy node on 'ctrl key' drop
		tree.on('beforenodedrop', function(de) {
				if (!de.rawEvent.ctrlKey) { return true; }
        var ns = de.dropNode, p = de.point, t = de.target;
        if(!(ns instanceof Array)){
            ns = [ns];
        }
        var n;
        for(var i = 0, len = ns.length; i < len; i++){
						n = cloneNode(ns[i]);
            if(p == "above"){
                t.parentNode.insertBefore(n, t);
            }else if(p == "below"){
                t.parentNode.insertBefore(n, t.nextSibling);
            }else{
                t.appendChild(n);
            }
        }
        n.ui.focus();
        if(this.hlDrop){
            n.ui.highlight();
        }
        t.ui.endDrop();
        this.fireEvent("nodedrop", de);
				return false;
			}, tree);

		// update on node drop
		tree.on('nodedrop', function(de) {
			var node = de.target;
			if (de.point != 'above' && de.point != 'below') {
				node = node.parentNode || node;
			}
			this.updateForm(false, node);
		}, this, {buffer:100});