在ExtJS的ComboBox组件中实现下拉树效果

今天看到一篇在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');   
    }
);  

附件一:

附件二:

转载于:https://www.cnblogs.com/zhangh/archive/2008/10/26/1319824.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值