ext-2.0扩展树形下拉框(代码及演示)

 转自: http://www.javaeye.com/topic/148441

演示地址：www.gx80.cn/example/ext-2.0/form/treeField.html

原代码：

js 代码

 

1. /** 
2.  * Ext JS Library 2.0 extend 
3.  * Version : 1.0 
4.  * Author : 飞天色鼠 
5.  * Date : 2007-12-13 
6.  * E-mail : gx80@qq.com 
7.  * HomePage : http://www.gx80.cn 
8.  */  
9.    
10. /** 
11.  * TreeField 
12.  */  
13. Ext.form.TreeField = Ext.extend(Ext.form.TriggerField,  {  
14.     readOnly : true ,  
15.     defaultAutoCreate : {tag: "input", type: "text", size: "24", autocomplete: "off"},  
16.     displayField : 'text',  
17.     valueField : undefined,  
18.     hiddenName : undefined,  
19.     listWidth : undefined,  
20.     minListWidth : 50,  
21.     layerHeight : undefined,  
22.     minLayerHeight : 60,  
23.     dataUrl : undefined,  
24.     tree : undefined,  
25.     value : undefined,  
26.     baseParams : {},  
27.     treeRootConfig : {  
28.         id : ' ',  
29.         text : 'please select...',  
30.         draggable:false  
31.         },  
32.     initComponent : function(){  
33.         Ext.form.TreeField.superclass.initComponent.call(this);  
34.         this.addEvents(  
35.                 'select',  
36.                 'expand',  
37.                 'collapse',  
38.                 'beforeselect'       
39.         );  
40.           
41.         if(this.transform){  
42.             this.allowDomMove = false;  
43.             var s = Ext.getDom(this.transform);  
44.             if(!this.hiddenName){  
45.                 this.hiddenName = s.name;  
46.             }  
47.               
48.             s.name = Ext.id();   
49.             if(!this.lazyRender){  
50.                 this.target = true;  
51.                 this.el = Ext.DomHelper.insertBefore(s, this.autoCreate || this.defaultAutoCreate);  
52.                 Ext.removeNode(s);   
53.                 this.render(this.el.parentNode);  
54.             }else{  
55.                 Ext.removeNode(s);   
56.             }  
57.   
58.         }  
59.     },  
60.     onRender : function(ct, position){  
61.         Ext.form.TreeField.superclass.onRender.call(this, ct, position);  
62.         if(this.hiddenName){  
63.             this.hiddenField = this.el.insertSibling({tag:'input', type:'hidden', name: this.hiddenName, id: (this.hiddenId||this.hiddenName)},  
64.                     'before', true);  
65.             this.hiddenField.value =  
66.                 this.hiddenValue !== undefined ? this.hiddenValue :  
67.                 this.value !== undefined ? this.value : '';  
68.             this.el.dom.removeAttribute('name');  
69.         }  
70.         if(Ext.isGecko){  
71.             this.el.dom.setAttribute('autocomplete', 'off');  
72.         }  
73.   
74.         this.initList();  
75.     },  
76.     initList : function(){  
77.         if(!this.list){  
78.             var cls = 'x-treefield-list';  
79.   
80.             this.list = new Ext.Layer({  
81.                 shadow: this.shadow, cls: [cls, this.listClass].join(' '), constrain:false  
82.             });  
83.   
84.             var lw = this.listWidth || Math.max(this.wrap.getWidth(), this.minListWidth);  
85.             this.list.setWidth(lw);  
86.             this.list.swallowEvent('mousewheel');  
87.               
88.             this.innerList = this.list.createChild({cls:cls+'-inner'});  
89.             this.innerList.setWidth(lw - this.list.getFrameWidth('lr'));  
90.             this.innerList.setHeight(this.layerHeight || this.minLayerHeight);  
91.             if(!this.tree){  
92.                 this.tree = this.createTree(this.innerList);      
93.             }  
94.             var treeField = this;  
95.             this.tree.on('click',function(node,e){  
96.                 treeField.onSelect(node);  
97.             });  
98.             this.tree.render();  
99.         }  
100.     },  
101.     onSelect:function(node){  
102.         if(this.fireEvent('beforeselect', node, this)!= false){  
103.             this.setValue(node);  
104.             this.collapse();  
105.             this.fireEvent('select', this, node);  
106.         }  
107.     },  
108.     createTree:function(el){  
109.         var Tree = Ext.tree;  
110.       
111.         var tree = new Tree.TreePanel({  
112.             el:el,  
113.             autoScroll:true,  
114.             animate:true,  
115.             containerScroll: true,   
116.             loader: new Tree.TreeLoader({  
117.                 dataUrl : this.dataUrl,  
118.                 baseParams : this.baseParams  
119.             })  
120.         });  
121.       
122.         var root = new Tree.AsyncTreeNode(this.treeRootConfig);  
123.         tree.setRootNode(root);  
124.         return tree;  
125.     },  
126.     getValue : function(){  
127.         if(this.valueField){  
128.             return typeof this.value != 'undefined' ? this.value : '';  
129.         }else{  
130.             return Ext.form.TreeField.superclass.getValue.call(this);  
131.         }  
132.     },  
133.     setValue : function(node){  
134.         var text = node[this.displayField];  
135.         var value = node[this.valueField || this.displayField];  
136.         if(this.hiddenField){  
137.             this.hiddenField.value = value;  
138.         }  
139.         Ext.form.TreeField.superclass.setValue.call(this, text);  
140.         this.value = value;  
141.     },  
142.     onDestroy : function(){  
143.         if(this.list){  
144.             this.list.destroy();  
145.         }  
146.         Ext.form.TreeField.superclass.onDestroy.call(this);  
147.     },  
148.     collapseIf : function(e){  
149.         if(!e.within(this.wrap) && !e.within(this.list)){  
150.             this.collapse();  
151.         }  
152.     },  
153.     expand : function(){  
154.         if(this.isExpanded() || !this.hasFocus){  
155.             return;  
156.         }  
157.         this.list.alignTo(this.wrap, this.listAlign);  
158.         this.list.show();  
159.         Ext.getDoc().on('mousewheel', this.collapseIf, this);  
160.         Ext.getDoc().on('mousedown', this.collapseIf, this);  
161.         this.fireEvent('expand', this);  
162.     },  
163.     collapse : function(){  
164.         if(!this.isExpanded()){  
165.             return;  
166.         }  
167.         this.list.hide();  
168.         Ext.getDoc().un('mousewheel', this.collapseIf, this);  
169.         Ext.getDoc().un('mousedown', this.collapseIf, this);  
170.         this.fireEvent('collapse', this);  
171.     },  
172.     isExpanded : function(){  
173.         return this.list && this.list.isVisible();  
174.     },  
175.     onTriggerClick : function(){  
176.         if(this.disabled){  
177.             return;  
178.         }  
179.         if(this.isExpanded()){  
180.             this.collapse();  
181.         }else {  
182.             this.onFocus({});  
183.             this.expand();  
184.         }  
185.         this.el.focus();  
186.     }  
187.                                   
188. });  
189. Ext.reg('treefield', Ext.form.TreeField);