Ext TreeCombo 树形 下拉框,树形下拉框,EXT树形

1.添加hiddenName，使传值时跟Ext.form.ComboBox类似;

2.设值时展开整棵树(在TreeCombo外实现)，使弹出下拉框时默认选中节点;

 

代码如下:

Js代码  

1. /** 
2.  * @version Base on Ext3.0 
3.  * @class Ext.ux.TreeCombo 
4.  * @extends Ext.form.TriggerField 
5.  */  
6.   
7. Ext.ux.TreeCombo = Ext.extend(Ext.form.TriggerField, {  
8.   
9.     // triggerClass: 'x-form-tree-trigger',  
10.   
11.     initComponent : function() {  
12.         this.readOnly = true;  
13.         Ext.ux.TreeCombo.superclass.initComponent.call(this);  
14.         this.on('specialkey', function(f, e) {  
15.                     if (e.getKey() == e.ENTER) {  
16.                         this.onTriggerClick();  
17.                     }  
18.                 }, this);  
19.         this.getTree();  
20.     },  
21.   
22.     onTriggerClick : function() {  
23.         this.getTree().show();  
24.         this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');  
25.     },  
26.   
27.     getTree : function() {  
28.         if (!this.treePanel) {  
29.             if (!this.treeWidth) {  
30.                 this.treeWidth = Math.max(150, this.width || 200);  
31.             }  
32.             if (!this.treeHeight) {  
33.                 this.treeHeight = 200;  
34.             }  
35.             this.treePanel = new Ext.tree.TreePanel({  
36.                 renderTo : Ext.getBody(),  
37.                 loader : this.loader || new Ext.tree.TreeLoader({  
38.                             preloadChildren : (typeof this.root == 'undefined'),  
39.                             url : this.dataUrl || this.url  
40.                         }),  
41.                 root : this.root || new Ext.tree.AsyncTreeNode({  
42.                             children : this.children  
43.                         }),  
44.                 rootVisible : (typeof this.rootVisible != 'undefined')  
45.                         ? this.rootVisible  
46.                         : (this.root ? true : false),  
47.                 floating : true,  
48.                 autoScroll : true,  
49.                 minWidth : 200,  
50.                 minHeight : 200,  
51.                 width : this.treeWidth,  
52.                 height : this.treeHeight,  
53.                 listeners : {  
54.                     hide : this.onTreeHide,  
55.                     show : this.onTreeShow,  
56.                     click : this.onTreeNodeClick,  
57.                     expandnode : this.onExpandOrCollapseNode,  
58.                     collapsenode : this.onExpandOrCollapseNode,  
59.                     resize : this.onTreeResize,  
60.                     scope : this  
61.                 }  
62.             });  
63.             this.treePanel.show();  
64.             this.treePanel.hide();  
65.             this.relayEvents(this.treePanel.loader, ['beforeload', 'load',  
66.                             'loadexception']);  
67.             if (this.resizable) {  
68.                 this.resizer = new Ext.Resizable(this.treePanel.getEl(), {  
69.                             pinned : true,  
70.                             handles : 'se'  
71.                         });  
72.                 this.mon(this.resizer, 'resize', function(r, w, h) {  
73.                             this.treePanel.setSize(w, h);  
74.                         }, this);  
75.             }  
76.         }  
77.         return this.treePanel;  
78.     },  
79.   
80.     onExpandOrCollapseNode : function() {  
81.         if (!this.maxHeight || this.resizable)  
82.             return; // -----------------------------> RETURN  
83.         var treeEl = this.treePanel.getTreeEl();  
84.         var heightPadding = treeEl.getHeight() - treeEl.dom.clientHeight;  
85.         var ulEl = treeEl.child('ul'); // Get the underlying tree element  
86.         var heightRequired = ulEl.getHeight() + heightPadding;  
87.         if (heightRequired > this.maxHeight)  
88.             heightRequired = this.maxHeight;  
89.         this.treePanel.setHeight(heightRequired);  
90.     },  
91.   
92.     onTreeResize : function() {  
93.         if (this.treePanel)  
94.             this.treePanel.getEl().alignTo(this.wrap, 'tl-bl?');  
95.     },  
96.   
97.     onTreeShow : function() {  
98.         Ext.getDoc().on('mousewheel', this.collapseIf, this);  
99.         Ext.getDoc().on('mousedown', this.collapseIf, this);  
100.     },  
101.   
102.     onTreeHide : function() {  
103.         Ext.getDoc().un('mousewheel', this.collapseIf, this);  
104.         Ext.getDoc().un('mousedown', this.collapseIf, this);  
105.     },  
106.   
107.     collapseIf : function(e) {  
108.         if (!e.within(this.wrap) && !e.within(this.getTree().getEl())) {  
109.             this.collapse();  
110.         }  
111.     },  
112.   
113.     collapse : function() {  
114.         this.getTree().hide();  
115.         if (this.resizer)  
116.             this.resizer.resizeTo(this.treeWidth, this.treeHeight);  
117.     },  
118.   
119.     // private  
120.     validateBlur : function() {  
121.         return !this.treePanel || !this.treePanel.isVisible();  
122.     },  
123.   
124.     setValue : function(v) {  
125.         this.startValue = this.value = v;  
126.         if (this.treePanel) {  
127.             var n = this.treePanel.getNodeById(v);//位于一级以下节点要树全部展开时才可用  
128.             if (n) {  
129.                 n.select();//默认选中节点  
130.                 this.setRawValue(n.text);  
131.                 if (this.hiddenField)  
132.                     this.hiddenField.value = v;  
133.             }  
134.         }  
135.     },  
136.   
137.     getValue : function() {  
138.         return this.value;  
139.     },  
140.   
141.     onTreeNodeClick : function(node, e) {  
142.         this.setRawValue(node.text);  
143.         this.value = node.id;  
144.         if (this.hiddenField)  
145.             this.hiddenField.value = node.id;  
146.         this.fireEvent('select', this, node);  
147.         this.collapse();  
148.     },  
149.     onRender : function(ct, position) {  
150.         Ext.ux.TreeCombo.superclass.onRender.call(this, ct, position);  
151.         if (this.hiddenName) {  
152.             this.hiddenField = this.el.insertSibling({  
153.                         tag : 'input',  
154.                         type : 'hidden',  
155.                         name : this.hiddenName,  
156.                         id : (this.hiddenId || this.hiddenName)  
157.                     }, 'before', true);  
158.   
159.             // prevent input submission  
160.             this.el.dom.removeAttribute('name');  
161.         }  
162.     }  
163. });  

 

示例:

1:选择页面，在定义了根节点的情况下逐级加载

 

Js代码  

1. var businessId = new Ext.ux.TreeCombo({  
2.             fieldLabel : '业务名称',  
3.             width : 120,  
4.             allowBlank : false,  
5.             //name : 'param.businessId',  
6.             hiddenName : 'param.businessId',  
7.             rootVisible : true,  
8.             root : new Ext.tree.AsyncTreeNode({  
9.                         text : '业务列表',  
10.                         expanded : true,  
11.                         levelNum : 0,  
12.                         id : '100000'  
13.                     }),  
14.             dataUrl : 'getChild_business.do?param.superId=100000'  
15.         });  
16.   
17. businessId.treePanel.on('beforeload', function(node) {  
18.     businessId.treePanel.loader.dataUrl = 'getChild_business.do?param.superId='  
19.             + node.id;});  

Js代码  

1. 后台请求回来的数据如: [{text:'业务23',id:'200024'},{text:'业务2',id:'200043'}]  
2.   
3.   
4.    

    

 2.显示并修改(expandAll后再setValue)

Js代码  

1. var businessId = new Ext.ux.TreeCombo({  
2.             fieldLabel : '业务名称',  
3.             width : 120,  
4.             allowBlank : false,  
5.             hiddenName : 'param.businessId',  
6.             rootVisible : false,  
7.             dataUrl : 'getAllJson_business.do'  
8.         });  
9.   
10. businessId.treePanel.on('load', function() {  
11.             businessId.setValue('<s:property value="#param.businessId" />');  
12.         });  
13. businessId.treePanel.expandAll();  

 

Js代码  

1. 后台请求返回的json如:  
2. [{  
3.             "id" : 100000,  
4.             "text" : "业务列表",  
5.             "leaf" : false,  
6.             "superId" : 0,  
7.             "children" : [{  
8.   
9.                         "id" : 200024,  
10.                         "text" : "业务23",  
11.                         "leaf" : false,  
12.                         "superId" : 100000,  
13.                         "children" : [...略]  
14.                     }, {  
15.   
16.                         "id" : 200043,  
17.                         "text" : "业务2",  
18.                         "leaf" : false,  
19.                         "superId" : 100000,  
20.                         "children" : [...略]  
21.                     }]  
22.         }]  
23.   
24.    

 

 
3.只读(直接用Ext.form.ComboBox)

Js代码  

1. 后台数据返回对应项即可  
2. [{"value":"200043","display":"业务2"}]  

 

 

 

 

----------------------2012-12-04-------补充个用静态树的例子---------备忘---------------------------

 

Java代码  

1. var childrenArrData =   
2.             [{  id:'-1',  
3.               text:'根节点',  
4.               value:'-1',  
5.               leaf:false,  
6.               children:[{id:'100',text:'测试',serialStart:'-1',leaf:false,children:[]}]  
7.              }];  
8.                           
9.                           
10. var treeCombo = new Ext.ux.TreeCombo({  
11.     fieldLabel : 'xx',  
12.     width : 300,  
13.     name : 'treeCombo',  
14.     hiddenName : 'treeCombo',  
15.     rootVisible : false,  
16.     root:new Ext.tree.AsyncTreeNode({  
17.        id:"-1",     
18.        text:"根节点",   
19.        expanded:true,  
20.        leaf:false,  
21.        children: childrenArrData  
22.     })  
23. });  
24.       
25. treeCombo.treePanel.on('click',function(node){  
26.     alert(node.attributes.value);//取节点属性  
27. });  
28.   
29. //先展开，再设值。这样才会显示text值，不然会显示value去  
30. function setTaskSerial(val){  
31.     treeCombo.treePanel.expandAll();  
32.     treeCombo.setValue(val);  
33. }  
34.      
35. function gettreeCombo(){  
36.     return treeCombo.getValue();  
37. }  

   ----------------------2012-12-04-------补充只读不可编辑---------备忘---------------------------

Java代码  

1. onTriggerClick : function() {  
2.     if(!this.disabled){//modify 20121204  
3.         this.getTree().show();  
4.         this.getTree().getEl().alignTo(this.wrap, 'tl-bl?');  
5.     }  
6. },  

    在原来的基础上加个判断，这样treeCombo.disable();后点击下拉箭头就能不让下拉了。

此文章为转载,仅供技术参考

下面是源码下载(完整项目+代码):
TreeCombo 点击下载即可运行..