相关文章: 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里的
这个ID可以改成别的, 但必须要在'expand'事件里, 将树显示在这个div上
就是如此简单...
看到这里,聪明的读者就会想到,如此类推,想在下拉表里放任何东西都是可以的,以下例子放一个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工程师
普元软件在北京和上海招聘技术高手加盟
本文转自
http://www.javaeye.com/topic/164424
就是如此简单...
看到这里,聪明的读者就会想到,如此类推,想在下拉表里放任何东西都是可以的,以下例子放一个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工程师
普元软件在北京和上海招聘技术高手加盟
本文转自
http://www.javaeye.com/topic/164424