在ExtJS的ComboBox组件中实现下拉树效果
刚好项目需要用到在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'); }
);
附件一：
附件二：
