最近涉及到的一個項目中,需要實現ComboBoxTree的效果,首先,看看效果吧……
在Extjs中是沒有這種效果的,所以得自己寫,在網絡上看了看別人的資料,自己再總結了一下,修改了一下,代碼如下:
Ext.ux.TreeCombo = Ext.extend(Ext.form.ComboBox, { constructor: function (cfg) { cfg = cfg || {}; Ext.ux.TreeCombo.superclass.constructor.call(this, Ext.apply({ maxHeight: 300, editable: false, mode: 'local', triggerAction: 'all', rootVisible: false, selectMode: 'all' }, cfg)); }, store: new Ext.data.SimpleStore({ fields: [], data: [[]] }), // 重寫onViewClick,使展開樹結點是不關閉下拉框 onViewClick: function (doFocus) { var index = this.view.getSelectedIndexes()[0], s = this.store, r = s.getAt(index); if (r) { this.onSelect(r, index); } if (doFocus !== false) { this.el.focus(); } }, tree: null, // 隱藏值 hiddenValue: null, getHiddenValue: function () { return this.hiddenValue; }, getValue: function () { //增加適用性,與原來combo組件一樣 return this.hiddenValue; }, setHiddenValue: function (code, dispText) { this.setValue(code); Ext.form.ComboBox.superclass.setValue.call(this, dispText); this.hiddenValue = code; }, initComponent: function () { var _this = this; var tplRandomId = 'deptcombo_' + Math.floor(Math.random() * 1000) + this.tplId this.tpl = "<div style='height:" + _this.maxHeight + "px' id='" + tplRandomId + "'></div>" this.tree = new Ext.tree.TreePanel({ border: false, enableDD: false, enableDrag: false, rootVisible: _this.rootVisible || false, autoScroll: true, trackMouseOver: true, height: _this.maxHeight, lines: true, singleExpand: true, root: new Ext.tree.AsyncTreeNode({ id: _this.rootId, text: _this.rootText, iconCls: 'ico-root', expanded: true, leaf: false, border: false, draggable: false, singleClickExpand: false, hide: true }), loader: new Ext.tree.TreeLoader({ nodeParameter: 'ID', requestMethod: 'GET', dataUrl: _this.url }) }); this.tree.on('click', function (node) { if ((_this.selectMode == 'leaf' && node.leaf == true) || _this.selectMode == 'all') { if (_this.fireEvent('beforeselect', _this, node)) { _this.fireEvent('select', _this, node); } } }); this.on('select', function (obj, node) { var dispText = node.text; var code = node.id; obj.setHiddenValue(code, dispText); obj.collapse(); }); this.on('expand', function () { this.tree.render(tplRandomId); }); Ext.ux.TreeCombo.superclass.initComponent.call(this); } }) Ext.reg("treecombo", Ext.ux.TreeCombo);
之後呢,在主頁中添加Extjs類庫
<link href="../ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <script src="../ext/adapter/ext/ext-base.js" type="text/javascript"></script> <script src="../ext/ext-all.js" type="text/javascript"></script> <script src="../ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script> <script src="../ext/ComboBoxTree.js" type="text/javascript"></script> <script src="login.js" type="text/javascript"></script>
其中,login.js的代碼如下:
/* File Created: 五月 27, 2013 */ Ext.onReady(function () { var _window = new Ext.Window({ title: "查詢條件", renderTo: Ext.getBody(), frame: true, plain: true, buttonAlign: "center", closeAction: "hide", maximizable: true, closable: true, bodyStyle: "padding:20px", width: 350, height: 300, layout: "form", lableWidth: 110, defaults: { xtype: "textfield", width: 180 }, items: [ { fieldLabel: "案件編號", anchor: "100%" }, { xtype: "datefield", fieldLabel: "案發時間", anchor: "100%" }, { fieldLabel: "舉報人", anchor: "100%" }, { fieldLabel: "被舉報單位或個人", anchor: "100%" }, { xtype: "treecombo", fieldLabel: "案件發生地", anchor: "100%", url: "http://localhost:1502/treeData.ashx"/// <reference path="../treeData.ashx" /> }, { xtype: "treecombo", fieldLabel: "案件類型", anchor: "100%", url: "http://localhost:1502/window/ajwflx.ashx" }, { xtype: "treecombo", fieldLabel: "案件性質", anchor: "100%", url: "http://localhost:1502/window/ajwfxz.ashx" } ], buttons: [{ text: "確定" }, { text: "取消", handler: function () { _window.hide(); } }] }) _window.show(); })
treedata.ashxd的內容爲:
string strTreeNode = "[" + "{'id':150100,'leaf':false,expanded:false,'text':'呼和浩特市國土資源局','children':[" + "{'id':150101,'leaf':true,'children':null,'text':'市轄區國土資源局'}," + "{'id':150102,'leaf':true,'children':null,'text':'新城區國土資源局'}," + "{'id':150103,'leaf':true,'children':null,'text':'回民區國土資源局'}," + "{'id':150104,'leaf':true,'children':null,'text':'玉泉區國土資源局'}," + "{'id':150105,'leaf':true,'children':null,'text':'賽罕區國土資源局'}," + "{'id':150121,'leaf':true,'children':null,'text':'土默特左旗國土資源局'}," + "{'id':150122,'leaf':true,'children':null,'text':'托克托縣國土資源局'}," + "{'id':150123,'leaf':true,'children':null,'text':'和林格爾縣國土資源局'}," + "{'id':150124,'leaf':true,'children':null,'text':'清水河縣國土資源局'}," + "{'id':150125,'leaf':true,'children':null,'text':'武川縣國土資源局'}" + "]}," + "{'id':150200,'leaf':false,expanded:false,'text':'包頭市國土資源局','children':[" + "{'id':150201,'leaf':true,'children':null,'text':'市轄區國土資源局'}," + "{'id':150202,'leaf':true,'children':null,'text':'東河區國土資源局'}," + "{'id':150203,'leaf':true,'children':null,'text':'昆都侖區國土資源局'}," + "{'id':150204,'leaf':true,'children':null,'text':'青山區國土資源局'}," + "{'id':150205,'leaf':true,'children':null,'text':'石柺區國土資源局'}," + "{'id':150206,'leaf':true,'children':null,'text':'白雲礦區國土資源局'}," + "{'id':150207,'leaf':true,'children':null,'text':'九原區國土資源局'}," + "{'id':150221,'leaf':true,'children':null,'text':'土默特右旗國土資源局'}," + "{'id':150222,'leaf':true,'children':null,'text':'固陽縣國土資源局'}," + "{'id':150223,'leaf':true,'children':null,'text':'達爾罕茂明安聯合旗國土資源局'}" + "]}," + "{'id':150300,'leaf':false,expanded:false,'text':'烏海市國土資源局','children':[" + "{'id':150301,'leaf':true,'children':null,'text':'市轄區國土資源局'}," + "{'id':150302,'leaf':true,'children':null,'text':'海勃灣區國土資源局'}," + "{'id':150303,'leaf':true,'children':null,'text':'海南區國土資源局'}," + "{'id':150304,'leaf':true,'children':null,'text':'烏達區國土資源局'}" + "]}," + "{'id':150400,'leaf':false,expanded:false,'text':'赤峯市國土資源局','children':[" + "{'id':150401,'leaf':true,'children':null,'text':'市轄區國土資源局'}," + "{'id':150402,'leaf':true,'children':null,'text':'紅山區國土資源局'}," + "{'id':150403,'leaf':true,'children':null,'text':'元寶山區國土資源局'}," + "{'id':150404,'leaf':true,'children':null,'text':'松山區國土資源局'}," + "{'id':150421,'leaf':true,'children':null,'text':'阿魯科爾沁旗國土資源局'}," + "{'id':150422,'leaf':true,'children':null,'text':'巴林左旗國土資源局'}," + "{'id':150423,'leaf':true,'children':null,'text':'巴林右旗國土資源局'}," + "{'id':150424,'leaf':true,'children':null,'text':'林西縣國土資源局'}," + "{'id':150425,'leaf':true,'children':null,'text':'克什克騰旗國土資源局'}," + "{'id':150426,'leaf':true,'children':null,'text':'翁牛特旗國土資源局'}," + "{'id':150428,'leaf':true,'children':null,'text':'喀喇沁旗國土資源局'}," + "{'id':150429,'leaf':true,'children':null,'text':'寧城縣國土資源局'}," + "{'id':150430,'leaf':true,'children':null,'text':'敖漢旗國土資源局'}" + "]}," + "{'id':150500,'leaf':false,expanded:false,'text':'通遼市國土資源局','children':[" + "{'id':150501,'leaf':true,'children':null,'text':'市轄區國土資源局'}," + "{'id':150502,'leaf':true,'children':null,'text':'科爾沁區國土資源局'}," + "{'id':150521,'leaf':true,'children':null,'text':'科爾沁左翼中旗國土資源局'}," + "{'id':150522,'leaf':true,'children':null,'text':'科爾沁左翼後旗國土資源局'}," + "{'id':150523,'leaf':true,'children':null,'text':'開魯縣國土資源局'}," + "{'id':150524,'leaf':true,'children':null,'text':'庫倫旗國土資源局'}," + "{'id':150525,'leaf':true,'children':null,'text':'奈曼旗國土資源局'}," + "{'id':150526,'leaf':true,'children':null,'text':'扎魯特旗國土資源局'}," + "{'id':150581,'leaf':true,'children':null,'text':'霍林郭勒市國土資源局'}" + "]}," + "{'id':150600,'leaf':false,expanded:false,'text':'鄂爾多斯市國土資源局','children':[" + "{'id':150602,'leaf':true,'children':null,'text':'東勝區國土資源局'}," + "{'id':150621,'leaf':true,'children':null,'text':'達拉特旗國土資源局'}," + "{'id':150622,'leaf':true,'children':null,'text':'準格爾旗國土資源局'}," + "{'id':150623,'leaf':true,'children':null,'text':'鄂托克前旗國土資源局'}," + "{'id':150624,'leaf':true,'children':null,'text':'鄂托克旗國土資源局'}," + "{'id':150625,'leaf':true,'children':null,'text':'杭錦旗國土資源局'}," + "{'id':150626,'leaf':true,'children':null,'text':'烏審旗國土資源局'}," + "{'id':150627,'leaf':true,'children':null,'text':'伊金霍洛旗國土資源局'}" + "]}," + "{'id':150700,'leaf':false,expanded:false,'text':'呼倫貝爾市國土資源局','children':[" + "{'id':150701,'leaf':true,'children':null,'text':'市轄區國土資源局'}," + "{'id':150702,'leaf':true,'children':null,'text':'海拉爾區國土資源局'}," + "{'id':150721,'leaf':true,'children':null,'text':'阿榮旗國土資源局'}," + "{'id':150722,'leaf':true,'children':null,'text':'莫力達瓦達斡爾族自治旗國土資源局'}," + "{'id':150723,'leaf':true,'children':null,'text':'鄂倫春自治旗國土資源局'}," + "{'id':150724,'leaf':true,'children':null,'text':'鄂溫克族自治旗國土資源局'}," + "{'id':150725,'leaf':true,'children':null,'text':'陳巴爾虎旗國土資源局'}," + "{'id':150726,'leaf':true,'children':null,'text':'新巴爾虎左旗國土資源局'}," + "{'id':150727,'leaf':true,'children':null,'text':'新巴爾虎右旗國土資源局'}," + "{'id':150781,'leaf':true,'children':null,'text':'滿洲裏市國土資源局'}," + "{'id':150782,'leaf':true,'children':null,'text':'牙克石市國土資源局'}," + "{'id':150783,'leaf':true,'children':null,'text':'扎蘭屯市國土資源局'}," + "{'id':150784,'leaf':true,'children':null,'text':'額爾古納市國土資源局'}," + "{'id':150785,'leaf':true,'children':null,'text':'根河市國土資源局'}" + "]}," + "{'id':150800,'leaf':false,expanded:false,'text':'巴彥淖爾市國土資源局','children':[" + "{'id':150801,'leaf':true,'children':null,'text':'市轄區國土資源局'}," + "{'id':150802,'leaf':true,'children':null,'text':'臨河區國土資源局'}," + "{'id':150821,'leaf':true,'children':null,'text':'五原縣國土資源局'}," + "{'id':150822,'leaf':true,'children':null,'text':'磴口縣國土資源局'}," + "{'id':150823,'leaf':true,'children':null,'text':'烏拉特前旗國土資源局'}," + "{'id':150824,'leaf':true,'children':null,'text':'烏拉特中旗國土資源局'}," + "{'id':150825,'leaf':true,'children':null,'text':'烏拉特後旗國土資源局'}," + "{'id':150826,'leaf':true,'children':null,'text':'杭錦後旗國土資源局'}" + "]}," + "{'id':150900,'leaf':false,expanded:false,'text':'烏蘭察布市國土資源局','children':[" + "{'id':150901,'leaf':true,'children':null,'text':'市轄區國土資源局'}," + "{'id':150902,'leaf':true,'children':null,'text':'集寧區國土資源局'}," + "{'id':150921,'leaf':true,'children':null,'text':'卓資縣國土資源局'}," + "{'id':150922,'leaf':true,'children':null,'text':'化德縣國土資源局'}," + "{'id':150923,'leaf':true,'children':null,'text':'商都縣國土資源局'}," + "{'id':150924,'leaf':true,'children':null,'text':'興和縣國土資源局'}," + "{'id':150925,'leaf':true,'children':null,'text':'涼城縣國土資源局'}," + "{'id':150926,'leaf':true,'children':null,'text':'察哈爾右翼前旗國土資源局'}," + "{'id':150927,'leaf':true,'children':null,'text':'察哈爾右翼中旗國土資源局'}," + "{'id':150928,'leaf':true,'children':null,'text':'察哈爾右翼後旗國土資源局'}," + "{'id':150929,'leaf':true,'children':null,'text':'四子王旗國土資源局'}," + "{'id':150981,'leaf':true,'children':null,'text':'豐鎮市國土資源局'}" + "]}," + "{'id':152200,'leaf':false,expanded:false,'text':'興安盟國土資源局','children':[" + "{'id':152201,'leaf':true,'children':null,'text':'烏蘭浩特市國土資源局'}," + "{'id':152202,'leaf':true,'children':null,'text':'阿爾山市國土資源局'}," + "{'id':152221,'leaf':true,'children':null,'text':'科爾沁右翼前旗國土資源局'}," + "{'id':152222,'leaf':true,'children':null,'text':'科爾沁右翼中旗國土資源局'}," + "{'id':152223,'leaf':true,'children':null,'text':'扎賚特旗國土資源局'}," + "{'id':152224,'leaf':true,'children':null,'text':'突泉縣國土資源局'}" + "]}," + "{'id':152500,'leaf':false,expanded:false,'text':'錫林郭勒盟國土資源局','children':[" + "{'id':152501,'leaf':true,'children':null,'text':'二連浩特市國土資源局'}," + "{'id':152502,'leaf':true,'children':null,'text':'錫林浩特市國土資源局'}," + "{'id':152522,'leaf':true,'children':null,'text':'阿巴嘎旗國土資源局'}," + "{'id':152523,'leaf':true,'children':null,'text':'蘇尼特左旗國土資源局'}," + "{'id':152524,'leaf':true,'children':null,'text':'蘇尼特右旗國土資源局'}," + "{'id':152525,'leaf':true,'children':null,'text':'東烏珠穆沁旗國土資源局'}," + "{'id':152526,'leaf':true,'children':null,'text':'西烏珠穆沁旗國土資源局'}," + "{'id':152527,'leaf':true,'children':null,'text':'太僕寺旗國土資源局'}," + "{'id':152528,'leaf':true,'children':null,'text':'鑲黃旗國土資源局'}," + "{'id':152529,'leaf':true,'children':null,'text':'正鑲白旗國土資源局'}," + "{'id':152530,'leaf':true,'children':null,'text':'正藍旗國土資源局'}," + "{'id':152531,'leaf':true,'children':null,'text':'多倫縣國土資源局'}" + "]}," + "{'id':152900,'leaf':false,expanded:false,'text':'阿拉善盟國土資源局','children':[" + "{'id':152921,'leaf':true,'children':null,'text':'阿拉善左旗國土資源局'}," + "{'id':152922,'leaf':true,'children':null,'text':'阿拉善右旗國土資源局'}," + "{'id':152923,'leaf':true,'children':null,'text':'額濟納旗國土資源局'}" + "]}" + "]"; context.Response.Write(strTreeNode);
如此,上面所述的效果就實現了……