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

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

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

原代码：

js 代码

1. /**
2. *ExtJSLibrary2.0extend
3. *Version:1.0
4. *Author:飞天色鼠
5. *Date:2007-12-13
6. *E-mail:gx80@qq.com
7. *HomePage:http://www.gx80.cn
8. */
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:'pleaseselect...',
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. );
41. if(this.transform){
42. this.allowDomMove=false;
43. vars=Ext.getDom(this.transform);
44. if(!this.hiddenName){
45. this.hiddenName=s.name;
46. }
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. }
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. }
74. this.initList();
75. },
76. initList:function(){
77. if(!this.list){
78. varcls='x-treefield-list';
80. this.list=newExt.Layer({
81. shadow:this.shadow,cls:[cls,this.listClass].join(''),constrain:false
82. });
84. varlw=this.listWidth||Math.max(this.wrap.getWidth(),this.minListWidth);
85. this.list.setWidth(lw);
86. this.list.swallowEvent('mousewheel');
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. vartreeField=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. varTree=Ext.tree;
111. vartree=newTree.TreePanel({
112. el:el,
113. autoScroll:true,
114. animate:true,
115. containerScroll:true,
116. loader:newTree.TreeLoader({
117. dataUrl:this.dataUrl,
118. baseParams:this.baseParams
119. })
120. });
122. varroot=newTree.AsyncTreeNode(this.treeRootConfig);
123. tree.setRootNode(root);
124. returntree;
125. },
126. getValue:function(){
127. if(this.valueField){
128. returntypeofthis.value!='undefined'?this.value:'';
129. }else{
130. returnExt.form.TreeField.superclass.getValue.call(this);
131. }
132. },
133. setValue:function(node){
134. vartext=node[this.displayField];
135. varvalue=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. returnthis.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. }
188. });
189. Ext.reg('treefield',Ext.form.TreeField);