combotree的总结(这个好)

1：最近有这个需求，就是ext下的combo下拉是树，网上的例子很多，封装的也很好，基本都可以满足下拉框下出现想要的树，但是我的使用情况是比如在用户编辑的时候，要把用户已经选择过的数值自动再赋值到下拉框内，比如之前选择了id为5的节点，那么编辑用户的时候combo中自动显示这个值

2：网上发现这样的例子不多，有一个是iteye上面写的，地址为http://zxlaiye.iteye.com/blog/1310556。经过测试这个里面有几个问题所在，并且有几个作者也没有说明白杂用，经过修改可以用了。

3：发个实例代码：

1. new Ext.ux.ComboBoxTree({
2. fieldLabel : '父菜单',
3. hiddenName : 'testTreeName',
4. value : 11,
5. height : 180,
6. width : 200,
7. dataUrl : PATH
8. + '/do.php?mod=util&action=query_parent_department_tree',
9. nodePathUrl : PATH
10. + '/do.php?mod=util&action=query_department_path&id=11',
11. rootVisible : false,
12. rootSelectable : false,
13. showFullPath : false,
14. allowBlank : false,
15. emptyText : '请选择'
16. })

其中hiddenName 是post过去的字段

dataUrl就是生成一般的树的路径了，这个都和平时一样，不一样的地方时多了个nodePathUrl，看这个我的例子中我给初始化的value为11，这个节点在我数据库中对应的父亲节点只推到最上的路径分别为/root/8/7/11  也就是说这个节点从刚才的路径利用treepanel的selectPath方法直接找到这个节点，然后把这个节点text对应到combo中，把value设置给name。之前这个问题是里面有个路径问题不可以找到，还有个地方时一个cu的函数的封装，cu函数就是请求nodePathUrl的。里面还有个问题是如果当前tree中没有root节点的话是对应不到的，总之我给修整好是可以用了，大家看源代码：

1. /**
2. * 自定义下拉树，支持初始化值时自动定位树节点。 还没有考虑性能问题。继承自Ext.form.ComboBox也很浪费。
3. * 代码中的cu.get()是自定义的异步请求方法。
4. */
5. /*
6. * 例子 new Ext.ux.ComboBoxTree({ fieldLabel:'父菜单', hiddenName: 'parentId', value:
7. * this.modifyId ? '' : this.parentMenu.id, height: 180, dataUrl:
8. * 'sys/menu/getMenus.do', 就是获取一般tree的url nodePathUrl:
9. * 'sys/util/getEntityIdPath.do?c=sys.entity.Menu',获取需要默认选中的那个节点的路径parentId/parentId/.../被选中节点的id
10. * root: {id:'root', text:'根菜单', expanded: true}, rootVisible: true,
11. * rootSelectable: true, rootValue: null, showFullPath: true, allowBlank: false,
12. * });
13. */
14. /**
15. * @author Linzongxue
16. * @create_date 2011-12-13
17. */
18. Ext.ux.ComboBoxTree = Ext.extend(Ext.form.ComboBox, {
19. // 树的配置项
20. dataUrl : null, // 获取树所有节点的url
21. // 通过id获取某个节点的id全路径的url，返回值的格式应该是：parentId1/parentId2/parentId3/../节点id
22. // 如果不设置这个值，下拉树不会自动定位节点并在初始化时显示文本
23. nodePathUrl : null,
24. loader : null,
25. root : {},
26. rootVisible : false,
27. // 树的选择模式
28. rootSelectable : false, // 根节点是否可选，默认为false
29. folderSelectable : true, // 目录是否可选，默认为true
30. leafSelectable : true, // 叶子是否可选，默认为true
31. showFullPath : false, // 是否显示全路径
32. rootValue : undefined, // 根节点的值（通常根节点的取值与普通节点的取值不一样，如果一样则不需要设置此值）
33. // 原combo类的配置项
34. store : new Ext.data.SimpleStore({
35. fields : [],
36. data : [[]]
37. }),
38. mode : 'local',
39. triggerAction : 'all',
40. editable : false,
41. forceSelection : true,
42. tree : null, // 树控件，在expand方法中初始化
43. // private: 用于防止combo收缩，在树的事件中控制此属性值
44. preventCollapse : false,
45. initComponent : function() {
46. this.treeId = Ext.id();
47. this.height = this.height || 200;
48. this.tpl = String.format(
49. '<tpl for="."><div id="{0}" style="height:{1}px"></div></tpl>',
50. this.treeId, this.height);
51. Ext.ux.ComboBoxTree.superclass.initComponent.call(this);
52. },
53. setValue : function(value) {
54. if (Ext.isObject(value)) { // 点击树节点时的选择
55. this.doSetValue(value);
56. } else { // 只是设置一个值，从后台获取这个值的路径，并在树中选中这个节点
57. if (!this.tree)
58. this.initTree();
59. if (value === this.tree.root.id
60. || (Ext.isDefined(this.rootValue) && value === this.rootValue)) { // 根节点
61. this.tree.root.select();
62. this.doSetValue(this.root);
63. return;
64. }
65. var url = this.nodePathUrl;
66. if (!url) {
67. this.doSetValue({
68. id : value
69. });
70. return;
71. }
72. Ext.Ajax.request({
73. url : url,
74. async : false,
75. scope : this,
76. success : function(resp, opts) {
77. var comboTree = this;
78. path = resp.responseText;
79. path = (path.indexOf('/') == 0 ? '' : '/')
80. +comboTree.tree.root.id+'/'+ path;
81. this.tree.selectPath(path, 'id', function(success,
82. node) {
83. comboTree.doSetValue(success
84. ? node
85. : null);
86. });
87. },
88. faliure : function() {
89. alert(3)
90. }
91. });
92. /*
93. * cu.get(url, {id: value}).done(function(path){//从后台发起请求获取id路径 path =
94. * '/' + this.root.id + (path.indexOf('/') == 0 ? '' : '/') + path;
95. * var comboTree = this; this.tree.selectPath(path, 'id',
96. * function(success, node){ comboTree.doSetValue(success ? node :
97. * null); }); }, this);
98. */
99. }
100. },
101. // private:设置值，参数value应该是一个对象
102. doSetValue : function(value) {
103. var id = value ? value.id : '';
104. var text = value ? value.text : '';
105. if (value && (value.loader || value.attributes)) { // 是树节点
106. var isRootNode = (value.id == this.tree.root.id);
107. if (isRootNode && Ext.isDefined(this.rootValue)) {
108. id = this.rootValue;
109. }
110. if (this.showFullPath) {
111. text = isRootNode ? '/' : value.getPath('text').replace(
112. '/' + this.tree.root.text, '');
113. }
114. }
115. this.value = id;
116. if (this.hiddenField) {
117. this.hiddenField.value = id; // 设置表单域
118. }
119. this.lastSelectionText = text;
120. this.el.dom.value = text; // 显示的值
121. this.fireEvent('select', this, value);
122. },
123. getValue : function() {
124. return Ext.isDefined(this.value) ? this.value : '';
125. },
126. // 取得选中的树节点
127. getValueNode : function() {
128. return this.tree
129. ? this.tree.getSelectionModel().getSelectedNode()
130. : null;
131. },
132. getText : function() {
133. return this.lastSelectionText || '';
134. },
135. reload : function() {
136. if (!this.tree)
137. return;
138. var node = this.tree.getSelectionModel().getSelectedNode();
139. var path = node ? node.getPath() : null;
140. this.tree.getLoader().load(this.tree.root, function() {
141. if (path) {
142. this.tree.selectPath(path);
143. }
144. }, this);
145. this.preventCollapse = true;
146. },
147. // private: 根据preventCollapse属性判断是否要收缩
148. collapse : function() {
149. if (this.preventCollapse) {
150. this.preventCollapse = false;
151. return;
152. }
153. Ext.ux.ComboBoxTree.superclass.collapse.call(this);
154. },
155. // private:
156. expand : function() {
157. Ext.ux.ComboBoxTree.superclass.expand.call(this);
158. if (!this.tree) {
159. this.initTree();
160. }
161. },
162. // private:
163. destroy : function() {
164. if (this.tree && this.tree.rendered)
165. this.tree.destroy();
166. Ext.form.ComboBox.superclass.destroy.call(this);
167. },
168. // private
169. initTree : function() {
170. if (!this.list) { // 必须先初始化列表，在一开始就设置了combotree的值时尤其重要，发现这个问题花了半天时间
171. this.initList();
172. }
173. // 设置this.preventCollapse=true，防止combo收缩
174. var enableCollapse = function() {
175. this.preventCollapse = false;
176. };
177. // 设置this.preventCollapse=false，允许combo收缩
178. var disableCollapse = function() {
179. this.preventCollapse = true;
180. };
181. this.tree = new Ext.tree.TreePanel({
182. renderTo : this.treeId,
183. useArrows : false,
184. autoScroll : true,
185. height : this.height, // 修复IE的bug
186. animate : true,
187. enableDD : false,
188. containerScroll : true,
189. border : false,
190. dataUrl : this.dataUrl,
191. loader : this.loader,
192. root : this.root,
193. rootVisible : this.rootVisible,
194. // bbar:[
195. // '->', {text: '刷新', handler: this.reload, iconCls:
196. // 'icon-refresh', scope: this} //由于宽度问题取消此功能
197. // ],
198. listeners : {
199. click : function(node) {
200. disableCollapse();
201. if (node == this.tree.root) { // 选中根节点
202. if (!this.rootSelectable)
203. return;
204. } else if (!node.isLeaf()) { // 选中目录节点
205. if (!this.folderSelectable)
206. return;
207. } else { // 选中叶子节点
208. if (!this.leafSelectable)
209. return;
210. }
211. // 先选择节点，再设置value，让getNodeValue方法在select事件中取到正确的值
212. node.select();
213. this.setValue(node);
214. enableCollapse();
215. },
216. // 展开和收缩节点时防止combo收缩
217. beforeexpandnode : disableCollapse,
218. beforecollapsenode : disableCollapse,
219. beforeload : disableCollapse,
220. // 节点加载和展开后允许combo收缩
221. load : enableCollapse,
222. expandnode : enableCollapse,
223. scope : this
224. }
225. });
226. }
227. });
228. Ext.reg('combotree', Ext.ux.ComboBoxTree);