EXT2.0 下拉树例子

看了很多关于EXT下拉树的实现, 发现很多例子都是对EXT原有的类进行扩展, 而且都发现用起来很费劲

 

在这里,本人实现的EXT下拉树是直接使用 Ext.form.ComboBox + Ext.tree.TreePanel, 将两者结合起来,不需要额外的扩展

效果图可见附件一

JS代码如下:

Js代码

1. var comboxWithTree = new Ext.form.ComboBox({  
2.         store:new Ext.data.SimpleStore({fields:[],data:[[]]}),  
3.         editable:false,  
4.         mode: 'local',  
5.         triggerAction:'all',  
6.         maxHeight: 200,  
7.         tpl: "<tpl for='.'><div style='height:200px'><div id='tree'></div></div></tpl>",  
8.         selectedClass:'',  
9.         onSelect:Ext.emptyFn  
10.     });  
11.     var tree = new Ext.tree.TreePanel({  
12.         loader: new Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}),  
13.         border:false,  
14.          root:new Ext.tree.AsyncTreeNode({text: '模板根目录',id:'0'})  
15.       });  
16.       tree.on('click',function(node){  
17.           comboxWithTree.setValue(node.text);  
18.           comboxWithTree.collapse();  
19.       });  
20.     comboxWithTree.on('expand',function(){  
21.         tree.render('tree');  
22.       });  
23.     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，效果图见附件二

Js代码

1. var comboxWithPanel = new Ext.form.ComboBox({  
2.     store:new Ext.data.SimpleStore({fields:[],data:[[]]}),  
3.     editable:false,  
4.     mode: 'local',  
5.     triggerAction:'all',  
6.     maxHeight: 200,  
7.     tpl: '<div style="height:200px"><div id="panel"></div></div>',  
8.     selectedClass:'',  
9.     onSelect:Ext.emptyFn  
10. });  
11. comboxWithPanel.render('comboxWithPanel');  
12. var tree2 = new Ext.tree.TreePanel({  
13.     loader: new Ext.tree.DWRTreeLoader({dwrCall:Tmplt.getTmpltTree}),  
14.     border:false,  
15.     autoScroll:true,  
16.     root:new Ext.tree.AsyncTreeNode({text: '模板根目录',id:'0'})  
17.     });  
18. var border = new Ext.Panel({  
19.     title:'面板title',  
20.     layout:'fit',  
21.     border:false,  
22.     height :200,  
23.     tbar:[{text:'确定一'},'-',new Ext.form.TextField({id: 'paramCnName',width:60}),{text:'查找一'}],  
24.     bbar:[{text:'确定二'},'-',new Ext.form.TextField({id: 'aa',width:60}),{text:'查找二'}],  
25.     items: tree2  
26.     });  
27. comboxWithPanel.on('expand',function(){  
28.     border.render('panel');  
29.     });  

	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