本文共 2011 字，大约阅读时间需要 6 分钟。

刚好项目需要用到在ExtJS的ComboBox组件中实现下拉树效果GOOGLE 就是好用 下面是我找的博文

看了很多关于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');   

    }

);  

附件一：

附件二：