2019獨角獸企業重金招聘Python工程師標準>>>

看了很多關于EXT下拉樹的實現, 發現很多例子都是對EXT原有的類進行擴展, 而且都發現用起來很費勁，在這里,本人實現的EXT下拉樹是直接使用 Ext.form.ComboBox + Ext.tree.TreePanel, 將兩者結合起來,不需要額外的擴展

效果可見附件一

JS代碼如下:

var?comboxWithTree?=?new?Ext.form.ComboBox({???
????????store:new?Ext.data.SimpleStore({fields:[],data:[[]]}),???
????????editable:false,???
????????mode:?'local',???
????????triggerAction:'all',???
????????maxHeight:?200,???
????????tpl:?"<tpl?for='.'><div?style='height:200px'><div?id='tree'></div></div></tpl>",???
????????selectedClass:'',???
????????onSelect:Ext.emptyFn???
????});???
????var?tree?=?new?Ext.tree.TreePanel({???
????????loader:?new?Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}),???
????????border:false,???
?????????root:new?Ext.tree.AsyncTreeNode({text:?'模板根目錄',id:'0'})???
??????});???
??????tree.on('click',function(node){???
??????????comboxWithTree.setValue(node.text);???
??????????comboxWithTree.collapse();???
??????});???
????comboxWithTree.on('expand',function(){???
????????tree.render('tree');???
??????});???
????comboxWithTree.render('comboxWithTree');??

??

這里的使用了Ext.tree.DWRTreeLoader 調用后臺方法讀取結點, 和下拉樹的實現本身沒任何關系,你可以使用任何的loader去加載樹結點，需要注意的是,ComboBox的tpl里的<div id='tree'>這個ID可以改成別的, 但必須要在'expand'事件里, 將樹顯示在這個div上

就是如此簡單...

看到這里，聰明的讀者就會想到，如此類推，想在下拉表里放任何東西都是可以的，以下例子放一個Panel，

效果圖見附件二

js代碼如下：

var?comboxWithPanel?=?new?Ext.form.ComboBox({???
????store:new?Ext.data.SimpleStore({fields:[],data:[[]]}),???
????editable:false,???
????mode:?'local',???
????triggerAction:'all',???
????maxHeight:?200,???
????tpl:?'<div?style="height:200px"><div?id="panel"></div></div>',???
????selectedClass:'',???
????onSelect:Ext.emptyFn???
});???
comboxWithPanel.render('comboxWithPanel');???
var?tree2?=?new?Ext.tree.TreePanel({???
????loader:?new?Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}),???
????border:false,???
????autoScroll:true,???
????root:new?Ext.tree.AsyncTreeNode({text:?'模板根目錄',id:'0'})???
????});???
var?border?=?new?Ext.Panel({???
????title:'面板title',???
????layout:'fit',???
????border:false,???
????height?:200,???
????tbar:[{text:'確定一'},'-',new?Ext.form.TextField({id:?'paramCnName',width:60}),{text:'查找一'}],???
????bbar:[{text:'確定二'},'-',new?Ext.form.TextField({id:?'aa',width:60}),{text:'查找二'}],???
????items:?tree2???
????});???
comboxWithPanel.on('expand',function(){???
????border.render('panel');???
????});??

?

附件一：

附件二：

?

轉載于:https://my.oschina.net/u/1379006/blog/209740

總結

以上是生活随笔為你收集整理的在ExtJS的ComboBox组件中实现下拉树效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。