导读：
相关文章: X
ext-2.0扩展树形下拉框(代码及演示)
Ext 的表单（Form）
Ext CheckTreeNode Example更多相关推荐
看了很多关于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: "
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里的
就是如此简单...
看到这里，聪明的读者就会想到，如此类推，想在下拉表里放任何东西都是可以的，以下例子放一个Panel，效果图见附件二
var comboxWithPanel = new Ext.form.ComboBox({
store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
editable:false,
mode: 'local',
triggerAction:'all',
maxHeight: 200,
tpl: '
',
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
查看次数: 9
描述:
大小: 150.3 KB
查看次数: 7
声明：JavaEye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接： 参加微软MSN机器人大赛，挑战你的想象力！赢取HP笔记本大奖！
推荐链接：
中国领先的电子商务网站－淘宝网招贤纳士，诚聘Java工程师
普元软件在北京和上海招聘技术高手加盟
- 顶
- 0
- 踩
- 0