main.js

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

		this.treePanel.expandPath(node.getPath());
	},

	// erase all and add a new empty form
	newForm : function() {
		var w = this.viewport.layout.center.getSize().width - 50;
		var node = this.setConfig({items:[{layout:'form',width:w,frame:true,title:'New form'}]});
		this.treePanel.expandPath(node.getPath());
		node.select();
		this.setCurrentNode(node);
	},

	// get a new ID
	getNewId : function() {
		return "form-gen-" + (this.idCounter++);
	},

	// add a config to the tree
	appendConfig : function(config, appendTo, doUpdate) {

		if (!appendTo) {
			appendTo = this.treePanel.getSelectedNode() ||
				this.treePanel.root;
		}
		var items = config.items;
		delete config.items;
		var newNode = new Ext.tree.TreeNode({id:config.id||this.getNewId(),text:this.configToText(config)});
		newNode.elConfig = config;
		appendTo.appendChild(newNode);
		if (items && items.length) {
			for (var i = 0; i < items.length; i++) {
					this.appendConfig(items[i], newNode, false);
			}
		}
		if (doUpdate !== false) {
			this.updateForm(false, newNode);
		}
		return newNode;

	},

	// remove a node
	removeNode : function(node) {
			if (!node || node == this.treePanel.root) { return; }
			var nextNode = node.nextSibling || node.parentNode;
			var pNode = node.parentNode;
			pNode.removeChild(node);
			this.updateForm(false, pNode);
			nextNode.select();
			this.setCurrentNode(nextNode);
	},

	// update the form
	setFormConfig : function(config, el) {

		el = el || this.formPanel;

		// empty the form
		if (el.items) {
			while (el.items.first()) {
				el.remove(el.items.first(), true);
			}
		}
		if (el.getLayoutTarget) {
			el.getLayoutTarget().update();
		} else {
			el.update();
		}

		// adding items
		var start = new Date().getTime();
		if (config.items) {
			for (var i=0;i<config.items.length;i++) {
				el.add(config.items[i]);
			}
		}
		el.doLayout();
		var time = new Date().getTime() - start;
		return time;

	},

	// show a window with the json config
	editConfig : function() {
		var size = this.viewport.getSize();
		if (!this.jsonWindow) {
			var tf = new Ext.form.TextArea();
			this.jsonWindow = new Ext.Window({
					title       : "Form Config",
					width       : 400,
					height      : size.height - 50,
					autoScroll  : true,
					layout      : 'fit',
					items       : [tf],
					modal       : true,
					closeAction : 'hide'
				});
			this.jsonWindow.tf = tf;

			this.jsonWindow.addButton({
					text    : "Close",
					scope   : this.jsonWindow,
					handler : function() { this.hide(); }
				});
			this.jsonWindow.addButton({
					text    : "Apply",
					scope   : this,
					handler : function() {
						var config = null;
						try {
							this.jsonWindow.el.mask("Please wait...");
							config = Ext.decode(tf.getValue());
						} catch (e) {
							config = null;
							Ext.Msg.alert("Error", "JSON is invalid : " + e.name + "<br/>" + e.message);
						}
						if (!config || !config.items || !(config.items instanceof Array)) {
							Ext.Msg.alert("Error", "First element must have an Array 'items' property"+
								"<br/>Example: {items:[title:'toto']}");
						} else {
								try {
									this.setConfig(config);
								} catch(e) {
									this.jsonWindow.el.unmask();
									Ext.Msg.alert("Error", "Error while adding : " + e.name + "<br/>" + e.message);
								}
						}
						this.jsonWindow.el.unmask();
						this.jsonWindow.hide();
					}
				});
		}
		var cleanConfig = this.getTreeConfig();
		cleanConfig = {items:cleanConfig.items};
		cleanConfig = Main.JSON.encode(cleanConfig);
		this.jsonWindow.tf.setValue(cleanConfig);
		this.jsonWindow.show();
	},

	// remove all nodes
	removeAll : function() {
		var root = this.treePanel.root;
		while(root.firstChild){
				root.removeChild(root.firstChild);
		}
	},

	// set config (remove then append a whole new config)
	setConfig : function(config) {
		if (!config || !config.items) { return false; }
		// delete all items
		this.removeAll();
		// add all items
		var root = this.treePanel.root;
		var node = null;
		for (var i = 0; i < config.items.length; i++) {
			try {
				node = this.appendConfig(config.items[i], root);
			} catch(e) {
				Ext.Msg.alert("Error", "Error while adding : " + e.name + "<br/>" + e.message);
			}
		}
		this.updateForm(true, root);
		return node || root;
	}


};

// modified Ext.util.JSON to display a readable config
Main.JSON = new (function(){
    var useHasOwn = {}.hasOwnProperty ? true : false;
    var pad = function(n) { return n < 10 ? "0" + n : n; };
    var m = {
        "\b": '\\b',
        "\t": '\\t',
        "\n": '\\n',
        "\f": '\\f',
        "\r": '\\r',
        '"' : '\\"',
        "\\": '\\\\'
    };
    var encodeString = function(s){
        if (/["\\\x00-\x1f]/.test(s)) {
            return '"' + s.replace(/([\x00-\x1f\\"])/g, function(a, b) {
                var c = m[b];
                if(c){ return c; }
                c = b.charCodeAt();
                return "\\u00" +
                    Math.floor(c / 16).toString(16) +
                    (c % 16).toString(16);
            }) + '"';
        }
        return '"' + s + '"';
    };
    
		var indentStr = function(n) {
			var str = "", i = 0;
			while (i<n) {
				str += "  ";
				i++;
			}
			return str;
		};

    var encodeArray = function(o, indent){
				indent = indent || 0;
        var a = ["["], b, i, l = o.length, v;
            for (i = 0; i < l; i += 1) {
                v = o[i];
                switch (typeof v) {
                    case "undefined":
                    case "function":
                    case "unknown":
                        break;
                    default:
                        if (b) {
                            a.push(',');
                        }
                        a.push(v === null ? "null" : Main.JSON.encode(v, indent + 1));
                        b = true;
                }
            }
            a.push("]");
            return a.join("");
    };
    
    var encodeDate = function(o){
        return '"' + o.getFullYear() + "-" +
                pad(o.getMonth() + 1) + "-" +
                pad(o.getDate()) + "T" +
                pad(o.getHours()) + ":" +
                pad(o.getMinutes()) + ":" +
                pad(o.getSeconds()) + '"';
    };
    
    this.encode = function(o, indent){
				indent = indent || 0;
        if(typeof o == "undefined" || o === null){
            return "null";
        }else if(o instanceof Array){
            return encodeArray(o, indent);
        }else if(o instanceof Date){
            return encodeDate(o);
        }else if(typeof o == "string"){
            return encodeString(o);
        }else if(typeof o == "number"){
            return isFinite(o) ? String(o) : "null";
        }else if(typeof o == "boolean"){
            return String(o);
        }else {
            var a = ["{\n"], b, i, v;
						if (o.items instanceof Array) {
							var items = o.items;
							delete o.items;
							o.items = items;
						}
            for (i in o) {
								if (i === "_node") { continue; }
                if(!useHasOwn || o.hasOwnProperty(i)) {
                    v = o[i];
										if (i === "id" && /^form-gen-/.test(o[i])) { continue; }
										if (i === "id" && /^ext-comp-/.test(o[i])) { continue; }
                    switch (typeof v) {
                    case "undefined":
                    case "function":
                    case "unknown":
                        break;
                    default:
                        if(b){ a.push(',\n'); }
												a.push(indentStr(indent), i, ":",
                                v === null ? "null" : this.encode(v, indent + 1));
                        b = true;
                    }
                }
            }
						a.push("\n" + indentStr(indent-1) + "}");
						return a.join("");
        }
    };
    
})();

// parse DocRefs
var fields = {};
var fileName;
var infos;
var type;
var desc;
for (fileName in DocRefs) {
	for (key in DocRefs[fileName]) {
		infos = DocRefs[fileName][key];
		if (infos.type == "Function") { continue; }
		desc = "<i>"+fileName+"</i><br/><b>"+infos.type+"</b> "+infos.desc;
		if (!fields[key]) {
			fields[key] = { desc:desc };
			if (infos.type == "Boolean") {
				type = "boolean";
			} else if (infos.type == "Number") {
				type = "number";
			} else if (infos.type.match(/Object/)) {
				type = "object";
			} else {
				type = "string";
			}
			fields[key].type = type;
		} else {
			fields[key].desc += "<hr/>" + desc;
		}
	}
}
Ext.apply(fields, {
	xtype  : {desc:"",type:"string",values:'component box viewport panel window dataview colorpalette datepicker tabpanel button splitbutton cycle toolbar tbitem tbseparator tbspacer tbfill tbtext tbbutton tbsplit paging editor treepanel field textfield trigger textarea numberfield datefield combo checkbox radio hidden form fieldset htmleditor timefield grid editorgrid progress'.split(' ')},
	region : {desc:"",type:"string",values:'center west north south east'.split(' ')},
	hideMode         : {desc:"",type:"string",values:'visibility display offsets'.split(' ')},
	msgTarget        : {desc:"",type:"string",values:'qtip title under side'.split(' ')},
	shadow           : {desc:"",type:"string",values:'sides frame drop'.split(' ')},
	tabPosition      : {desc:"",type:"string",values:'top bottom'.split(' ')},
	columnWidth      : {desc:"Size of column (0 to 1 for percentage, >1 for fixed width",type:"number"},
	fieldLabel       : {desc:"Label of the field",type:"string"}});
fields.layout.values = [];
for (i in Ext.Container.LAYOUTS) { fields.layout.values.push(i); }
fields.vtype.values = [];
for (i in Ext.form.VTypes) { fields.vtype.values.push(i); }
fields.defaultType.values = fields.defaults.xtype;
Main.FIELDS = fields;


// custom editors for attributes
Main.getCustomEditors = function() {
	var g = Ext.grid;
	var f = Ext.form;
	var cmEditors = new g.PropertyColumnModel().editors;
	var eds = {};
	var fields = Main.FIELDS;
	for (i in fields) {
		if (fields[i].values) {
			var values = fields[i].values;
			var data = [];
			for (j=0;j<values.length;j++) { data.push([values[j],values[j]]); }
			eds[i] = new g.GridEditor(new f.SimpleCombo({forceSelection:false,data:data,editable:true}));
		} else if (fields[i].type == "boolean") {
			eds[i] = cmEditors['boolean'];
		} else if (fields[i].type == "number") {
			eds[i] = cmEditors['number'];
		} else if (fields[i].type == "string") {
			eds[i] = cmEditors['string'];
		}
	}
	return eds;
};

main = new Main();
Ext.onReady(main.init, main);

// some extensions
Ext.form.SimpleCombo = Ext.extend(Ext.form.ComboBox, {
    mode           : 'local',
    triggerAction  : 'all',
    typeAhead      : false,
    valueField     : 'value',
    displayField   : 'name',
    forceSelection : true,
    editable       : false,
    initComponent  : function(){
        Ext.form.TimeField.superclass.initComponent.call(this);
        if(!this.store && this.data){
            this.store = new Ext.data.SimpleStore({
                fields: ['value','name','cls'],
                data : this.data
            });
        }
				this.tpl = '<tpl for="."><div class="x-combo-list-item {cls}">{' + this.displayField + '}</div></tpl>';
    }

});
Ext.reg('simplecombo', Ext.form.SimpleCombo);

Ext.form.PostalCodeField = Ext.extend(Ext.form.TextField, {
    maskRe         : /[0-9]/,
		acceptDep      : false,
		width          : 50,

		initComponent  : function() {
			if (this.acceptDep) {
				this.regex = /^\d{2}$|^\d{5}$/;
			} else {
				this.regex = /^\d{5}$/;
			}
		}
});
Ext.reg('postalcodefield', Ext.form.PostalCodeField);


Ext.form.MultiCheckbox = Ext.extend(Ext.form.Field, {
	data : [['a','Aaa'],['b','Bbb']],
	onRender : function(ct, position){

		this.el = ct.createChild({tag:'div',cls:'x-form-field x-form-multicheckbox',id:this.id||Ext.id()});

		for (var i=0;i<this.data.length;i++) {
			var id = Ext.id();
			this.el.createChild({tag:'div',cls:'x-form-check-wrap',children:[{
				tag: "input", type: 'checkbox', cls: 'x-form-checkbox', autocomplete: "off", id:id, value:this.data[i][0]
			},{
				tag: "label", cls: 'x-form-cb-label', htmlFor:id, html:this.data[i][1]
			}]});
		}
	},

	getValue : function() {
		var value = [];
		this.el.select('input').each(function(i) {
			if (i.dom.checked) {
				value.push(i.dom.value);
			}
		});
		return value;
	},

	getRawValue : function() {
		return this.getValue();
	},

	setValue : function(value) {
		if (!value || !(value instanceof Array)) {value = [];}
		this.el.select('input').each(function(i) {
				i.dom.checked = (value.indexOf(i.dom.value) != -1);
		});
	},

	setRawValue : function(value) {
		this.setValue(value);
	}

});
Ext.reg('multicheckbox', Ext.form.MultiCheckbox);