extjs2.0 ie8 下拉树_在ExtJS的ComboBox组件中实现下拉树效果

今天看到一篇在ExtJS的ComboBox组件中实现下拉树效果的好文，特转载如下：

看了很多关于EXT下拉树的实现, 发现很多例子都是对EXT原有的类进行扩展, 而且都发现用起来很费劲，在这里,本人实现的EXT下拉树是直接使用 Ext.form.ComboBox + Ext.tree.TreePanel, 将两者结合起来,不需要额外的扩展

效果可见附件一

JS代码如下:

varcomboxWithTree=newExt.form.ComboBox(...{   

        store:newExt.data.SimpleStore(...{fields:[],data:[[]]}),   

        editable:false,   

        mode:'local',   

        triggerAction:'all',   

        maxHeight:200,   

        tpl:"",   

        selectedClass:'',   

        onSelect:Ext.emptyFn   

    });   

vartree=newExt.tree.TreePanel(...{   

        loader:newExt.tree.DWRTreeLoader(...{dwrCall:Tmplt.getTmpltTree}),   

        border:false,   

         root:newExt.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，

效果图见附件二

js代码如下：

varcomboxWithPanel=newExt.form.ComboBox(...{   

    store:newExt.data.SimpleStore(...{fields:[],data:[[]]}),   

    editable:false,   

    mode:'local',   

    triggerAction:'all',   

    maxHeight:200,   

    tpl:'

    selectedClass:'',   

    onSelect:Ext.emptyFn   

});   

comboxWithPanel.render('comboxWithPanel');   

vartree2=newExt.tree.TreePanel(...{   

    loader:newExt.tree.DWRTreeLoader(...{dwrCall:Tmplt.getTmpltTree}),   

    border:false,   

    autoScroll:true,   

    root:newExt.tree.AsyncTreeNode(...{text:'模板根目录',id:'0'})   

    });   

varborder=newExt.Panel(...{   

    title:'面板title',   

    layout:'fit',   

    border:false,   

    height :200,   

    tbar:[...{text:'确定一'},'-',newExt.form.TextField(...{id:'paramCnName',width:60}),...{text:'查找一'}],   

    bbar:[...{text:'确定二'},'-',newExt.form.TextField(...{id:'aa',width:60}),...{text:'查找二'}],   

    items: tree2   

    });   

comboxWithPanel.on('expand',function()...{   

    border.render('panel');   

    });  

附件一：

附件二：