EXT2.0 下拉树例子(超简单)

本文主要是介绍EXT2.0 下拉树例子(超简单)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

导读：
　　相关文章: 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

这篇关于EXT2.0 下拉树例子(超简单)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！