EXT2.0 下拉樹例子(超簡單)

導讀：
　　相關文章: X
　　ext-2.0擴充樹形下拉框(代碼及示範)
　　Ext 的表單（Form）
　　Ext CheckTreeNode Example更多相關推薦
　　看了很多關於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: " ",
　　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裡的 這個ID可以改成別的, 但必須要在'expand'事件裡, 將樹顯示在這個div上
　　就是如此簡單...
　　
　　看到這裡，聰明的讀者就會想到，如此類推，想在下拉表裡放任何東西都是可以的，以下例子放一個Panel，效果圖見附件二
　　var comboxWithPanel = new Ext.form.ComboBox({
　　store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
　　editable:false,
　　mode: 'local',
　　triggerAction:'all',
　　maxHeight: 200,
　　tpl: ' ',
　　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');
　　});
　　
　　
　　
　　
　　描述:
　　大小: 153 KB
　　查看次數: 9
　　
　　
　　
　　描述:
　　大小: 150.3 KB
　　查看次數: 7
　　聲明：JavaEye文章著作權屬於作者，受法律保護。沒有作者書面許可不得轉載。
　　推薦連結： 參加微軟MSN機器人大賽，挑戰你的想象力。贏取HP筆記本大獎。
　　推薦連結：
　　中國領先的電子商務網站－淘寶網招賢納士，誠聘Java工程師
　　普元軟體在北京和上海招聘技術高手加盟

本文轉自
http://www.javaeye.com/topic/164424