extjs TreeComboBox

Ext.ns('Ext.my.form');
// TreeComboBox
(function() {
	var createTreePanel = function(treeWidth, treeHeight, rootVisible, root) {
		var treePanel = new Ext.tree.TreePanel( {
			//id : 'treePanel-' + (++Ext.Component.AUTO_ID),
			root : root,
			rootVisible : rootVisible,
			floating : true,
			autoScroll : true,
			renderTo : Ext.getBody(),
			width : treeWidth || 230,
			height : treeHeight || 250,
			tbar:{},
			bbar:{}
		});

		return treePanel;
	}

	var createStore = function(treePanelId, storeBaseParams, storeMethod,
			dataUrl, storeRoot, storeTotalProperty) {
		var store = new Ext.data.JsonStore( {
			proxy : new Ext.data.HttpProxy( {
				method : storeMethod || 'GET',
				url : dataUrl
			}),
			baseParams : storeBaseParams || {
				query : '',
				start : 0
			},
			root : storeRoot || 'data',
			totalProperty : storeTotalProperty || "total",
			fields : [0],
			autoLoad : false,
			load : function(options) {
				options.callback = function() {
					Ext.getCmp(treePanelId).root.removeAll(true);
					Ext.getCmp(treePanelId).root
							.appendChild(this.reader.jsonData.data);
				};
				return Ext.data.JsonStore.superclass.load.call(this, options);
			}
		})
		return store;
	}

	Ext.my.form.TreeComboBox = Ext.extend(Ext.form.TwinTriggerField, {

		initComponent : function() {
			Ext.my.form.TreeComboBox.superclass.initComponent.call(this);
			this.on('specialkey', function(f, e) {
				if (e.getKey() == e.ENTER) {
					this.onTrigger2Click();
				}
			}, this);
			this.treePanel = createTreePanel(this.treeWidth, this.treeHeight,
					this.rootVisible, this.root);
			this.treePanel.on('hide', this.onTreeHide, this);
			this.treePanel.on('show', this.onTreeShow, this);
			this.treePanel.on('click', this.onTreeNodeClick, this);
			//this.treePanel
			//		.on('collapsenode', this.onExpandOrCollapseNode, this);
			this.store = createStore(this.treePanel.id, this.storeBaseParams,
					this.storeMethod, this.dataUrl, this.storeRoot,
					this.storeTotalProperty);			
			this.treePanel.getTopToolbar().addItem(new Ext.ux.form.SearchField( {
						width : this.treeWidth ? this.treeWidth : 220,
						store : this.store
					}));
			this.treePanel.getBottomToolbar().addItem(new Ext.PagingToolbar({store:this.store}));
			this.resizer = new Ext.Resizable(this.treePanel.id, {
				handles : 'se',
				minWidth : 100,
				minHeight : 80,
				pinned : true
			});
			this.mon(this.resizer, 'resize', function(r, w, h) {
				this.treePanel.setSize(w, h);
				this.treePanel.getTopToolbar().get(0).setSize(w - 10, 18);
			}, this);
		},
		trigger1Class : 'x-form-clear-trigger',
		onTrigger1Click : function() {
			this.setRawValue('');
			this.setHiddenValue('');
		},
		onTrigger2Click : function() {
			this.treePanel.show();
			this.treePanel.getEl().alignTo(this.wrap, 'tl-bl?');
		},
		editable : false,
		storeAutoLoad : true,
		frstLoad : true,
		onTreeShow : function() {
			Ext.getDoc().on('mousewheel', this.collapseIf, this);
			Ext.getDoc().on('mousedown', this.collapseIf, this);
			if (this.storeAutoLoad && this.frstLoad) {
				this.store.load( {});
				this.frstLoad = false;
			}
		},
		onTreeHide : function() {
			Ext.getDoc().un('mousewheel', this.collapseIf, this);
			Ext.getDoc().un('mousedown', this.collapseIf, this);
		},
		collapseIf : function(e) {
			if (!e.within(this.wrap) && !e.within(this.treePanel.getEl())) {
				this.collapse();
			}
		},
		collapse : function() {
			this.treePanel.hide();
		},
		// private
		validateBlur : function() {
			return !this.treePanel || !this.treePanel.isVisible();
		},
		setValue : function(v) {
			this.setRawValue(v);
		},
		getValue : function() {
			return this.getRawValue();
		},
		setHiddenValue : function(v) {
			return this.hiddenField.value = v;
		},
		getHiddenValue : function() {
			return this.hiddenField.value;
		},
		getHiddenId : function() {
			return this.hiddenField.id;
		},
		onTreeNodeClick : function(node, e) {
			this.setRawValue(node.text);
			this.hiddenField.value = node.id
			this.fireEvent('select', this, node);
			this.collapse();
		},
		onRender : function(ct, position) {
			Ext.my.form.TreeComboBox.superclass.onRender.call(this, ct,
					position);
			if (!this.hiddenField) {
				this.hiddenField = this.getEl().insertSibling( {
					tag : 'input',
					type : 'hidden',
					name : this.name,
					value : this.hiddenValue,
					id : (this.hiddenId || this.name)
				}, 'before', true);
				this.getEl().dom.removeAttribute('name');
			}
		}

	});
})();
Ext.reg('treeComboBox', Ext.my.form.TreeComboBox);

new Ext.my.form.TreeComboBox({
storeRoot:"data",
renderTo:Ext.getBody(),
storeTotalProperty:"total",
dataUrl:"../Test/list.html",
root:new Ext.tree.TreeNode({
id:"Root",icon:"",text:"所有分類",leaf:false}),
fieldLabel:"選擇分類"})

后台数据

{"total":100,"data":
[
new Ext.tree.AsyncTreeNode({id:"9",icon:"",text:"aaa",
    children:[
        new Ext.tree.TreeNode({icon:"",text:"bbb",leaf:true})
    ],leaf:false}),
new Ext.tree.AsyncTreeNode({id:"1",icon:"",text:"aaa1",leaf:true}),
new Ext.tree.AsyncTreeNode({id:"2",icon:"",text:"aaa2",leaf:true})
]
}