ext版本：4

簡介：支援多選、單選、非同步載入子節點（當然一下子拼接好全部節點的json也是絕對沒問題的），(已測試通過)瀏覽器相容ie8、ie11、谷歌、FF。

轉載請說明出處：http://blog.csdn.net/seedingly/article/details/19168721

最終的js程式碼：

Ext.define("Ext.ux.comboboxtree", {
	extend : "Ext.form.field.Picker",
	alias: ['widget.comboboxtree'], 
	requires : ["Ext.tree.Panel"], 
	store:{},
	treePanel: {},
	config: { 
        maxPickerWidth: 200, 
        maxPickerHeight: 200, 
        minPickerHeight: 100 
    },
	initComponent : function() {
		var self = this;
		Ext.apply(self, {
			fieldLabel : self.fieldLabel,
			labelWidth : self.labelWidth     
		});
		self.callParent();
		this.treePanel = Ext.create('Ext.tree.Panel',{
			width: self.maxPickerWidth, 
			height:self.maxPickerHeight,
			autoScroll : true,
			floating : true,
			focusOnToFront : false,
			shadow : false,
      		useArrows : true,
			store : this.store,
			rootVisible : false,
			listeners:{
				'itemclick' : function(view,record,item,index,e,eOpts){
					self.setRawValue(record.get('id'));// 真值
		    		self.setValue(record.get('id'));// 顯示值
		        	self.collapse();//self.picker.hide();
				}
			}
		});
//		this.treePanel.on('itemclick', function (view, record) {
//        	self.setRawValue(record.get('id'));// 真值
//    		self.setValue(record.get('id'));// 顯示值
//        	self.collapse();//self.picker.hide();
//    	});
		this.treePanel.on("beforeload", function(ds, opration, opt) {
        	opration.params.comboTreetext = opration.node.data.text;
       		opration.params.comboTreeid = opration.node.data.id;
    	}); 
	},
	createPicker : function() {
		var self = this;
		self.picker = this.treePanel;
		self.picker.on({
			checkchange : function() {
				var records = self.picker.getView().getChecked(), names = [], values = [];
				Ext.Array.each(records, function(rec) {
					values.push(rec.get('id'));
					names.push(rec.get('id'));//rec.get('text')
				});
				self.setRawValue(values.join(';'));// 真值
				self.setValue(names.join(';'));// 顯示值
				self.picker.hide(); 			//[目前單選,該批次程式碼、treePanel的itemclick事件去掉則多選]
				Ext.Array.each(records, function(record) {//[目前單選,該批次程式碼、treePanel的itemclick事件去掉則多選]
					record.set('checked', false);	//[目前單選,該批次程式碼、treePanel的itemclick事件去掉則多選]
				});					//[目前單選,該批次程式碼、treePanel的itemclick事件去掉則多選]
			},
                beforerender : function(){self.store.load();}   //[每次開啟該下拉框是，重新載入store，刪掉則不會重新載入!]						
		});
		return self.picker;
	},
	alignPicker : function() {
		var me = this, picker, isAbove, aboveSfx='-above';
		if (this.isExpanded) {
			picker = me.getPicker();
			if (me.matchFieldWidth) {
				picker.setWidth(me.bodyEl.getWidth());
			}
			if (picker.isFloating()) {
				picker.alignTo(me.inputEl, "", me.pickerOffset);// ""->tl
				isAbove = picker.el.getY() < me.inputEl.getY();
				me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls+ aboveSfx);
				picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls + aboveSfx);
			}
		}
	}
});

 

{  
                xtype: 'comboboxtree',  
                name: 'comboboxtree', fieldLabel: '下拉樹示例',id:'comboboxtree',anchor:'100%',
		maxPickerHeight:160,
                store: Ext.create('Ext.data.TreeStore', {
			        root: {
			            text:'全國',
						id:'-1',
						//icon:fullpath+'/icons/home_page_icon/home.gif',
						expanded : false
			        },
			        proxy: {   
			            type: 'ajax',   
			            url: fullpath+'/systemextend/UserZoneAction!getAllUserZoneTree.do'
			        }  
	    		})
            }
 

StringBuffer jsons = new StringBuffer("[");
jsons.append("{ text: '全國' ,id:'-1' ,checked: false ,leaf: false ,expanded: true ,children: [{ text: '111' ,id:'EXAMLIB0000111' ,checked: false ,leaf: true},{ text: '222' ,id:'EXAMLIB0000222' ,checked: false ,leaf: true},{ text: '333' ,id:'EXAMLIB0000333' ,checked: false ,leaf: true},{ text: '444' ,id:'EXAMLIB0000444' ,checked: false ,leaf: true},{ text: '555' ,id:'EXAMLIB0000555' ,checked: false ,leaf: true},{ text: '666' ,id:'EXAMLIB0000666' ,checked: false ,leaf: true},{ text: '777' ,id:'EXAMLIB0000777' ,checked: false ,leaf: true},{ text: '888' ,id:'EXAMLIB0000888' ,checked: false ,leaf: true},{ text: '999' ,id:'EXAMLIB0000999' ,checked: false ,leaf: true}]}");
jsons.append("]");
 

圖示如下（圖示是個親測示例，效果還可以嘛，最後應用到了三級可非同步載入子節點的區域下拉樹選項框）：

注意事項：若出現“Uncaught TypeError: Cannot read property 'internalId' of undefined”的錯誤，請檢查返回的json的id值！使用前建議結合瀏覽器的除錯工具測試哦。

心得：ext4重寫控制元件，可以歸納為重寫extjs類吧。這方面加強學習，設計起來就能夠得心應手了。該下拉樹用到picker，define了該類的createPicker屬性（第38行），“self.picker = this.tree;”這句程式碼定義了該控制元件的選項框，請重點關注！小頂一下。