在ExtJS的ComboBox組件中實現下拉樹效果

看了不少關於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');   
    });  

 

附件一：

附件二：