EXT2.0 下拉树例子

看了很多关于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:"<tplfor='.'><divstyle='height:200px'><divid='tree'></div></div></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');

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，效果图见附件二

varcomboxWithPanel=newExt.form.ComboBox({
store:newExt.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
mode:'local',
triggerAction:'all',
maxHeight:200,
tpl:'<divstyle="height:200px"><divid="panel"></div></div>',
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');
});

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'); });

• 
• 描述:
• 大小: 153 KB

• 
• 描述:
• 大小: 150.3 KB