2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

看了很多關(guān)于EXT下拉樹(shù)的實(shí)現(xiàn), 發(fā)現(xiàn)很多例子都是對(duì)EXT原有的類進(jìn)行擴(kuò)展, 而且都發(fā)現(xiàn)用起來(lái)很費(fèi)勁，在這里,本人實(shí)現(xiàn)的EXT下拉樹(shù)是直接使用 Ext.form.ComboBox + Ext.tree.TreePanel, 將兩者結(jié)合起來(lái),不需要額外的擴(kuò)展

效果可見(jiàn)附件一

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 調(diào)用后臺(tái)方法讀取結(jié)點(diǎn), 和下拉樹(shù)的實(shí)現(xiàn)本身沒(méi)任何關(guān)系,你可以使用任何的loader去加載樹(shù)結(jié)點(diǎn)，需要注意的是,ComboBox的tpl里的<div id='tree'>這個(gè)ID可以改成別的, 但必須要在'expand'事件里, 將樹(shù)顯示在這個(gè)div上

就是如此簡(jiǎn)單...

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

效果圖見(jiàn)附件二

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');???
????});??

?

附件一：

附件二：

?

轉(zhuǎn)載于:https://my.oschina.net/u/1379006/blog/209740

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。