main.js.bak

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

		var grid = new Ext.grid.PropertyGrid({
				title            : 'Parameters',
				height           : 300,
				split            : true,
				region           : 'center',
				source           : {},
				bbar             : ['Add :', newPropertyField ],
				customEditors    : Main.getCustomEditors(),
				newPropertyField : newPropertyField
			});

		var valueRenderer = function(value, p, r) {
			if (typeof value == 'boolean') {
				p.css = (value ? "typeBoolTrue" : "typeBoolFalse");
				return (value ? "True" : "False");
			} else if (this.attrType(r.id) == 'object') {
				p.css = "typeObject";
				return value;
			} else {
				return value;
			}
		}.createDelegate(this);
		var propertyRenderer = function(value, p) {
			var t = Main.FIELDS[value];
			qtip = (t ? t.desc : '');
			p.attr = 'qtip="' + qtip.replace(/"/g,'"') + '"';
			return value;
		};
		grid.colModel.getRenderer = function(col){
			return (col == 0 ? propertyRenderer : valueRenderer);
		};

		var contextMenu = new Ext.menu.Menu({items:[{
				id      : 'FBMenuPropertyDelete',
				iconCls : 'icon-delete',
				text    : 'Delete this property',
				scope   : this,
				handler : function(item,e) {
						this.markUndo('Delete property <i>' + item.record.id + '</i>');
						var ds = grid.store;
						delete grid.getSource()[item.record.id];
						ds.remove(item.record);
						delete item.record;
						this.updateNode(grid.currentNode);
						var node = grid.currentNode.parentNode || grid.currentNode;
						this.updateForm.defer(200, this, [false, node]);
					}
			}]});

		// property grid contextMenu
		grid.on('rowcontextmenu', function(g, idx, e) {
				e.stopEvent();
				var r = this.store.getAt(idx);
				if (!r) { return false; }
				var i = contextMenu.items.get('FBMenuPropertyDelete');
				i.setText('Delete property "' + r.id + '"');
				i.record = r;
				contextMenu.showAt(e.getXY());
			}, grid);


		// update node text & id
		grid.store.on('update', function(s,r,t) {
			if (t == Ext.data.Record.EDIT) {
				this.markUndo('Set <i>' + r.id + '</i> to "' +
					Ext.util.Format.ellipsis((String)(r.data.value), 20) + '"');
				var node = grid.currentNode;
				this.updateNode(grid.currentNode);
				this.updateForm(false, node.parentNode || node);
			}
		}, this, {buffer:100});

		this.editPanel = grid;

	},

	// Components panel
	initComponentsPanel : function() {

		// components; config is either an object, or a function called with the adding function and parent config
		var data = Components.getComponents();
		var ds = new Ext.data.SimpleStore({
			fields: ['category','name','description','config'],
			data : data
		});
		var tpl = new Ext.XTemplate(
			'<ul id="FormBuilderComponentSelector">',
			'<tpl for=".">',
				'<li class="component" qtip="{description}">{name}</li>',
			'</tpl>',
			'<div class="x-clear"></div>',
			'</ul>');
		var view = new Ext.DataView({
			store        : ds,
			tpl          : tpl,
			overClass    : 'over',
			selectedClass: 'selected',
			singleSelect : true,
			itemSelector : '.component'
		});
		view.on('dblclick', function(v,idx,node,e) {
				e.preventDefault();
				var n = this.editPanel.currentNode;
				if (!n) { return false; }
				var c = view.store.getAt(idx).data.config;
				if (!c) { return false; }
				if (typeof c == 'function') {
					c.call(this,function(config) {
						var newNode = this.appendConfig(config, n, true, true);
					}, n.elConfig);
				} else {
					var newNode = this.appendConfig(this.cloneConfig(c), n, true, true);
				}
			}, this);
		view.on('render', function() {
				var d = new Ext.dd.DragZone(view.el, {
						ddGroup         : 'component',
						containerScroll : true,
						getDragData     : function(e) {
								view.onClick(e);
								var r = view.getSelectedRecords();
								if (r.length == 0) { return false; }
								var el = e.getTarget('.component');
								if (el) { return {ddel:el,compData:r[0].data}; }
							},
						getTreeNode : function(data, targetNode) {
								if (!data.compData) { return null; }

								var c = data.compData.config;
								if (typeof c == 'function') {
									c.call(this,function(config) {
										var n = this.appendConfig(config, targetNode, true, true);
										this.setCurrentNode(n, true);
									}, targetNode.elConfig);
								} else {
									var n = this.appendConfig(this.cloneConfig(data.compData.config), targetNode, true, true);
									this.setCurrentNode(n, true);
									return n;
								}
								return null;

							}.createDelegate(this)
					});
				view.dragZone = d;
			}, this);

		var filter = function(b) { ds.filter('category', new RegExp(b.text)); };
		var tb = ['<b>Components categories : </b>', {
				text         : 'All',
				toggleGroup  : 'categories',
				enableToggle : true,
				pressed      : true,
				scope        : ds,
				handler      : ds.clearFilter
			}, '-'];
		var cats = [];
		ds.each(function(r) {
			var tokens = r.data.category.split(",");
			Ext.each(tokens, function(token) {
				if (cats.indexOf(token) == -1) {
					cats.push(token);
				}
			});
		});
		Ext.each(cats, function(v) {
			tb.push({
					text         : v,
					toggleGroup  : 'categories',
					enableToggle : true,
					handler      : filter
				});
			});

		var panel = new Ext.Panel({
			region:'south',
			height:100,
			layout:'fit',
			autoScroll:true,
			items:[view],
			tbar:tb
		});

		panel.view = view;
		this.componentsPanel = panel;

	},

	// Undo history
	initUndoHistory : function() {
		this.undoHistoryMax = 20;
		this.undoHistory = [];
	},

	// add current config to undo
	markUndo : function(text) {
		this.undoHistory.push({text:text,config:this.getTreeConfig()});
		if (this.undoHistory.length > this.undoHistoryMax) {
			this.undoHistory.remove(this.undoHistory[0]);
		}
		this.updateUndoBtn();
	},

	// update undo button according to undo history
	updateUndoBtn : function() {
		if (this.undoHistory.length == 0) {
			Ext.ComponentMgr.get('FBUndoBtn').disable().setText('Undo');
		} else {
			Ext.ComponentMgr.get('FBUndoBtn').enable().setText('<b>Undo</b> : ' +
				this.undoHistory[this.undoHistory.length-1].text);
		}
	},

	// undo last change
	undo : function() {
		var undo = this.undoHistory.pop();
		this.updateUndoBtn();
		if (!undo || !undo.config) { return false; }
		this.setConfig(undo.config);
		return true;
	},

	// return the node corresponding to an element (search upward)
	getNodeForEl : function(el) {
		var search = 0;
		var target = null;
		while (search < 10) {
			target = Ext.ComponentMgr.get(el.id);
			if (target && target._node) {
				return target._node;
			}
			el = el.parentNode;
			if (!el) { break; }
			search++;
		}
		return null;
	},

	// show the layer to visually resize / move element 
	visualResize : function(node) {
		if (node == this.treePanel.root || !node || !node.fEl) { return; }
		if (node.parentNode && node.parentNode.elConfig && node.parentNode.elConfig.layout == 'fit') {
			Ext.Msg.alert("Error", "You won't be able to resize an element" +
				" contained in a 'fit' layout.<br/>Update the parent element instead.");
		} else {
			if (node.parentNode && node.parentNode.elConfig && node.parentNode.elConfig.layout == 'absolute') {
				this.resizeLayer.resizer.dd.unlock();
				this.resizeLayer.resizer.dd.constrainTo(node.parentNode.fEl.body);
			} else {
				this.resizeLayer.resizer.dd.lock();
			}
			this.resizeLayer.setBox(node.fEl.el.getBox());
			this.resizeLayer.show();
		}
	},

	// hide select layers (e is click event)
	hideHighligt : function(e) {
		if (e) { e.preventDefault(); }
		this.builderPanel.el.select('.selectedElement').removeClass('selectedElement');
		this.builderPanel.el.select('.selectedElementParent').removeClass('selectedElementParent');
	},

	// set current editing node
	setCurrentNode : function(node, select) {
		var p = this.editPanel;
		p.enable();
		if (!node || !node.elConfig) {
			p.currentNode = null;
			p.setSource({});
			p.disable();
		} else {
			config = node.elConfig;
			for (k in config) {
				if (this.attrType(k) == 'object' && typeof config[k] == 'object') {
					try {
						var ec = Ext.encode(config[k]);
						config[k] = ec;
					} catch(e) {}
				}
			}
			p.setSource(config);
			p.currentNode = node;
			if (node.fEl == this.builderPanel) {
				p.disable();
			}
		}
		if (select) {
			this.treePanel.expandPath(node.getPath());
			node.select();
		}
	},

	// update node text & id (if necessary)
	updateNode : function(node) {
		if (!node) { return; }
		node.setText(this.configToText(node.elConfig));
		if (node.elConfig.id && node.elConfig.id != node.id) {
//            node.getOwnerTree().unregisterNode(node);
			node.id = node.elConfig.id;
//            node.getOwnerTree().registerNode(node);
		}
	},

	// update the form at the specified node (if force or autoUpdate is true)
	updateForm : function(force, node) {
			node = node || this.treePanel.root;
			var updateTime = (node == this.treePanel.root);
			var time = null;

			// search container to update, upwards
			node = this.searchForContainerToUpdate(node);

			if (force === true || this.autoUpdate) {
				var config = this.getTreeConfig(node, true);
				time = this.setFormConfig(config, node.fEl);
				this.updateTreeEls(node.fEl);
				this.hideHighligt();

				// save into cookies
				this.cookies.set('formbuilderconfig', this.getTreeConfig());
			}

			if (time && updateTime) {
				Ext.ComponentMgr.get('FBRenderingTimeBtn').setText(
					'Rendering time : <i>' + time + 'ms</i>');
			}
	},

	// load from cookies if present
	loadConfigFromCookies : function() {
		var c = this.cookies.get('formbuilderconfig');
		if (c) {
			try {
				this.setConfig(c);
			} catch(e) {
				return false;
			}
			return true;
		} else {
			return false;
		}
	},

	// search upware for a container to update
	searchForContainerToUpdate : function(node) {

		// search for a parent with border or column layout
		var found = null;
		var root = this.treePanel.root;
		var n = node;
		while (n != root) {
			if (n && n.elConfig &&
					(n.elConfig.layout == 'border' ||
						n.elConfig.layout == 'table' ||
						n.elConfig.layout == 'column')) {
				found = n;
			}
			n = n.parentNode;
		}
		if (found !== null) { return found.parentNode; }

		// no column parent, search for first container with items
		n = node;
		while (n != root) {
			if (!n.fEl || !n.fEl.items) {
				n = n.parentNode;
			} else {
				break;
			}
		}
		return n;
	},

	// hilight an element
	highlightElement : function(el) {
			this.resizeLayer.hide();
			if (el == this.builderPanel.el) { return; }
			if (el) {
				var elParent = el.findParent('.x-form-element', 5, true);
				this.hideHighligt();
				if (elParent) { elParent.addClass("selectedElementParent"); }
				el.addClass("selectedElement");
			}
	},

	// get the tree config at the specified node
	getTreeConfig : function(node, addNodeInfos) {
		if (!node) { node = this.treePanel.root; }
		var config = Ext.apply({}, node.elConfig);
		if (!config.id && addNodeInfos) { config.id = node.id; }
		for (k in config) {
			if (this.attrType(k) == 'object') {
				try { config[k] = Ext.decode(config[k]); } catch(e) {}
			}
		}
		if (addNodeInfos) { config._node = node; }
		var items = [];
		node.eachChild(function(n) {
			items.push(this.getTreeConfig(n, addNodeInfos));
		}, this);
		if (items.length > 0) {
			config.items = items;
		} else if (config.xtype == 'form') {
			config.items = {};
		} else {
			delete config.items;
		}
		return config;
	},

	// update node.fEl._node associations
	updateTreeEls : function(el) {
		if (!el) { el = this.builderPanel; }
		if (el._node) {
			el._node.fEl = el;
			// workaround for fieldsets
			if (el.xtype == 'fieldset') {
				el.el.dom.id = el.id;
			}
		}
		if (!el.items) { return; }
		try {
			el.items.each(function(i) { this.updateTreeEls(i); }, this);
		} catch (e) {}
	},