main.js.bak

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

Main = function() {};

Main.prototype = {

	init: function() {

		Ext.QuickTips.init();

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

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

		this.initResizeLayer();
		this.initUndoHistory();
		this.initTreePanel();
		this.initEditPanel();
		this.initComponentsPanel();

		this.viewport = new Ext.Viewport({
			layout : 'border',
				items: [{
					region  : 'north',
					title   : 'Gui Builder',
					height  : 52,
					tbar    : [{
							text : 'Reset All',
							iconCls:'icon-reset',
							scope: this,
							handler:function() {
								this.markUndo("Reset All");
								this.resetAll();
							}
						},'-',{
							text:'Show/Edit JSON',
							iconCls:'icon-editEl',
							scope:this,
							handler:this.editConfig
						},'<-',{
							iconCls : 'icon-update',
							text    : 'Update',
							tooltip : 'Apply changes',
							scope   : this,
							handler : function() { this.updateForm(true); }
						},{
							xtype    : 'checkbox',
							boxLabel : 'Auto',
							id       : 'FBAutoUpdateCB',
							tooltip  : 'Auto update the form if checked. Disable it if rendering is too slow',
							checked  : this.autoUpdate
						},'-',{
							iconCls : 'icon-time',
							text    : 'Rendering time : <i>unknown</i>',
							scope   : this,
							id      : 'FBRenderingTimeBtn',
							tooltip : 'Click to update form and display rendering time',
							handler : function() {
								this.updateForm(true);
							}
						},'->',{
							id      : 'FBUndoBtn',
							iconCls : 'icon-undo',
							text    : 'Undo',
							disabled: true,
							tooltip : "Undo last change",
							handler : this.undo,
							scope   : this
						},'->',{
							text    : 'Help',
							iconCls : 'icon-help',
							handler : function() {
								Ext.Msg.alert('Informations',
									"<i>Author : Christophe Badoit (extjs a t tof2k d o t com)</i><br/>" +
									'Source : <a href="main.js">main.js</a> <a href="components.js">components.js</a> <a href="cfg.js">cfg.js</a>');
							}
						}
					]
				},
				{
					region: 'west',
					border: false,
					width : 255,
					split : true,
					xtype : 'panel',
					layout: 'border',
					items : [
						this.treePanel,
						this.editPanel
					]
				},
					this.componentsPanel,
				{
					region:'center',
					layout:'fit',
					border:false,
					bodyBorder:false,
					style:'padding:3px 5px;background:black',
					items:{border:false,bodyBorder:false,bodyStyle:'background:black;border:dashed green 1px;',layout:'fit',id:'FBBuilderPanel'}
				}
				]
			});
			this.builderPanel = Ext.ComponentMgr.get('FBBuilderPanel');
			var root = this.treePanel.root;
			root.fEl = this.builderPanel;
			root.elConfig = this.builderPanel.initialConfig;
			this.builderPanel._node = root;

			var drop = new Ext.dd.DropZone(main.builderPanel.el, {
					ddGroup:'component',
					notifyOver : function(src,e,data) {
							var node = main.getNodeForEl(e.getTarget());
							if (node) {
								data.node = node; node.select();
								this.highlightElement(node.fEl.el);
								if (this.canAppend({}, node) === true) {
									return true;
								} else {
									data.node = null;
									return false;
								}
							} else {
								data.node = null;
								return false;
							}
						}.createDelegate(this),
					notifyDrop : function(src,e,data) {
							if (!data.node || !data.compData) { return; }
							var c = data.compData.config;
							if (typeof c == 'function') {
								c.call(this,function(config) {
									var n = this.appendConfig(config, data.node, true, true);
									this.setCurrentNode(n, true);
								}, data.node.elConfig);
								return true;
							} else {
								var n = this.appendConfig(this.cloneConfig(data.compData.config), data.node, true, true);
								this.setCurrentNode(n, true);
							}
							return true;
						}.createDelegate(this),
					notifyOut : function(src,e,data) {
							data.node = null;
						}
				});
			main.builderPanel.drop = drop;

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

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



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

			// select elements on form with single click
			this.builderPanel.el.on('click', function(e,el) {
					e.preventDefault();
					var node = this.getNodeForEl(el);
					if (!node) { node = this.treePanel.root; }
					this.highlightElement(node.fEl.el);
					this.setCurrentNode(node, true);
				}, this);
			// menu on form elements
			this.builderPanel.el.on('contextmenu', function(e,el) {
					e.preventDefault();
					var node = this.getNodeForEl(el);
					if (!node) { return; }
					this.highlightElement(node.fEl.el);
					this.setCurrentNode(node, true);
					this.contextMenu.node = node;
					this.contextMenu.showAt(e.getXY());
				}, this);
	},

	// the tree panel, listing elements
	initTreePanel : function() {
		var tree = new Ext.tree.TreePanel({
			region          : 'north',
			title           : "Elements Tree",
			iconCls         : "icon-el",
			collapsible     : true,
			floatable       : false,
			autoScroll      : true,
			height          : 200,
			split           : true,
			animate         : false,
			enableDD        : true,
			ddGroup         : 'component',
			containerScroll : true,
			selModel        : new Ext.tree.DefaultSelectionModel(),
			bbar            : [{
				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(); }
			}]
		});

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

		tree.on('click', function(node, e) {
			e.preventDefault();
			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 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);

		// assert node drop
		tree.on('nodedragover', function(de) {
			var p = de.point, t= de.target;
			if(p == "above" || t == "below") {
					t = t.parentNode;
			}
			if (!t) { return false; }
			this.highlightElement(t.fEl.el);
			return (this.canAppend({}, t) === true);
		}, this);

		// copy node on 'ctrl key' drop
		tree.on('beforenodedrop', function(de) {
				if (!de.rawEvent.ctrlKey) {
					this.markUndo("Moved " + de.dropNode.text);
					return true;
				}
				this.markUndo("Copied " + de.dropNode.text);
        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(de.tree.hlDrop){ n.ui.highlight(); }
        t.ui.endDrop();
        de.tree.fireEvent("nodedrop", de);
				return false;
			}, this);

		// 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});

		// get first selected node
		tree.getSelectedNode = function() {
			return this.selModel.getSelectedNode();
		};

		// context menu to delete / duplicate...
		var contextMenu = new Ext.menu.Menu({items:[{
				text    : 'Delete this element',
				iconCls : 'icon-deleteEl',
				scope   : this,
				handler : function(item) {
						this.removeNode(contextMenu.node);
					}
			},{
				text    : 'Add new element as child',
				iconCls : 'icon-addEl',
				scope   : this,
				handler : function(item) {
						var node = this.appendConfig({}, contextMenu.node, true, true);
						this.treePanel.expandPath(node.getPath());
					}
			},{
				text    : 'Add new element under',
				iconCls : 'icon-addEl',
				scope   : this,
				handler : function(item) {
						var node = this.appendConfig({}, contextMenu.node.parentNode, true, true);
						this.treePanel.expandPath(node.getPath());
					}
			},{
				text    : 'Duplicate this element',
				iconCls : 'icon-dupEl',
				scope   : this,
				handler : function(item) {
						var node = contextMenu.node;
						this.markUndo("Duplicate " + node.text);
						var newNode = cloneNode(node);
						if (node.isLast()) {
							node.parentNode.appendChild(newNode);
						} else {
							node.parentNode.insertBefore(newNode, node.nextSibling);
						}
						this.updateForm(false, node.parentNode);
					}
			},{
				text    : 'Visual resize / move',
				tooltip : 'Visual resize the element.<br/>You can move it too if in an <b>absolute</b> layout',
				iconCls : 'icon-resize',
				scope   : this,
				handler : function(item) {
						this.visualResize(contextMenu.node);
					}
			}]});
		tree.on('contextmenu', function(node, e) {
				e.preventDefault();
				if (node != this.treePanel.root) {
					contextMenu.node = node;
					contextMenu.showAt(e.getXY());
				}
			}, this);
		this.contextMenu = contextMenu;

		this.treePanel = tree;
	},

	// layer used for selection resize
	initResizeLayer : function() {

		this.resizeLayer = new Ext.Layer({cls:'resizeLayer',html:'Resize me'});
		this.resizeLayer.setOpacity(0.5);
		this.resizeLayer.resizer = new Ext.Resizable(this.resizeLayer, {
			handles:'all',
			draggable:true,
			dynamic:true});
		this.resizeLayer.resizer.dd.lock();
		this.resizeLayer.resizer.on('resize', function(r,w,h) {
				var n = this.editPanel.currentNode;
				if (!n || !n.elConfig) { return false; }
				this.markUndo("Resize element to " + w + "x" + h);
				var s = n.fEl.el.getSize();
				if (s.width != w) {
					n.elConfig.width = w;
					if (n.parentNode.elConfig.layout == 'column') {
						delete n.elConfig.columnWidth;
					}
				}
				if (s.height != h) {
					n.elConfig.height = h;
					delete n.elConfig.autoHeight;
				}
				this.updateForm(true, n.parentNode);
				this.setCurrentNode(n);
				this.highlightElement(n.fEl.el);
			}, this);
		this.resizeLayer.resizer.dd.endDrag = function(e) {
				var n = this.editPanel.currentNode;
				if (!n || !n.elConfig) { return false; }
				var pos = this.resizeLayer.getXY();
				var pPos = n.parentNode.fEl.body.getXY();
				var x = pos[0] - pPos[0];
				var y = pos[1] - pPos[1];
				this.markUndo("Move element to " + x + "x" + y);
				n.elConfig.x = x;
				n.elConfig.y = y;
				this.updateForm(true, n.parentNode);
				this.setCurrentNode(n);
				this.highlightElement(n.fEl.el);
		}.createDelegate(this);

	},

	// customized property grid for attributes
	initEditPanel : function() {

		var fields = [];
		for (var i in Main.FIELDS) {fields.push([i,i]);}
		var newPropertyField = new Ext.form.ComboBox({
				mode           : 'local',
				valueField     : 'value',
				displayField   : 'name',
				store          : new Ext.data.SimpleStore({
						sortInfo : {field:'name',order:'ASC'},
						fields   : ['value','name'],
						data     : fields
					})});
		newPropertyField.on('specialkey', function(tf,e) {
			var name = tf.getValue();
			var ds = this.editPanel.store;
			if (e.getKey() == e.ENTER && name != '' && !ds.getById(name)) {
				var defaultVal = "";
				if (this.attrType(name) == 'object') { defaultVal = "{}"; }
				if (this.attrType(name) == 'number') { defaultVal = 0; }
				ds.add(new Ext.grid.PropertyRecord({name:name, value:defaultVal}, name));
				this.editPanel.startEditing(ds.getCount()-1, 1);
				tf.setValue('');
			}
		}, this);