EXT2.0 checkbox树的扩展
EXT2.0 checkbox树的扩展(支持单选,级联多选,只选叶子等)
转载自http://www.iteye.com/topic/164426
在ext1.x里,树是没有checkbox的, 幸好在2.X版本里提供了这个功能, 在许多应用里, 带有checkbox的树使用还是很常见的
Ext2.X提供了简单的checkbox实现,但对于一些复杂的需求,如: 级联多选(选中父结点,自选中其所有子结点和所有父结点) , 单选等等, Ext2.X并没有帮我们实现
还有最难解决的情况, 当树是异步的时候, 要想级联多选, 实现起来有些难度
在此, 通过对Ext.tree.TreeNodeUI进行扩展,这些问题都得到很好的解决
1. /**
2. * @class Ext.tree.TreeCheckNodeUI
3. * @extends Ext.tree.TreeNodeUI
4. *
5. * 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
6. *
7. * 扩展的功能点有：
8. * 一、支持只对树的叶子进行选择
9. * 只有当返回的树结点属性leaf = true 时，结点才有checkbox可选
10. * 使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false
11. *
12. * 二、支持对树的单选
13. * 只允许选择一个结点
14. * 使用时，只需在声明树时，加上属性 checkModel: "single" 既可
15. *
16. * 二、支持对树的级联多选
17. * 当选择结点时，自动选择该结点下的所有子结点，以及该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中
18. * 使用时，只需在声明树时，加上属性 checkModel: "cascade" 既可
19. *
20. * 三、添加"check"事件
21. * 该事件会在树结点的checkbox发生改变时触发
22. * 使用时，只需给树注册事件,如：
23. * tree.on("check",function(node,checked){...});
24. *
25. * 默认情况下，checkModel为'multiple'，也就是多选，onlyLeafCheckable为false，所有结点都可选
26. *
27. * 使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} 既可.
28. * 例如：
29. * var tree = new Ext.tree.TreePanel({
30. * el:'tree-ct',
31. * width:568,
32. * height:300,
33. * checkModel: 'cascade', //对树的级联多选
34. * onlyLeafCheckable: false,//对树所有结点都可选
35. * animate: false,
36. * rootVisible: false,
37. * autoScroll:true,
38. * loader: new Ext.tree.DWRTreeLoader({
39. * dwrCall:Tmplt.getTmpltTree,
40. * baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } //添加 uiProvider 属性
41. * }),
42. * root: new Ext.tree.AsyncTreeNode({ id:'0' })
43. * });
44. * tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
45. * tree.render();
46. *
47. */
48.
49. Ext.tree.TreeCheckNodeUI = function() {
50. //'multiple':多选; 'single':单选; 'cascade':级联多选
51. this.checkModel = 'multiple';
52.
53. //only leaf can checked
54. this.onlyLeafCheckable = false;
55.
56. Ext.tree.TreeCheckNodeUI.superclass.constructor.apply(this, arguments);
57. };
58.
59. Ext.extend(Ext.tree.TreeCheckNodeUI, Ext.tree.TreeNodeUI, {
60.
61. renderElements : function(n, a, targetNode, bulkRender){
62. var tree = n.getOwnerTree();
63. this.checkModel = tree.checkModel || this.checkModel;
64. this.onlyLeafCheckable = tree.onlyLeafCheckable || false;
65.
66. // add some indent caching, this helps performance when rendering a large tree
67. this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
68.
69. var cb = (!this.onlyLeafCheckable || a.leaf);
70. var href = a.href ? a.href : Ext.isGecko ? "" : "#";
71. var buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
72. '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
73. '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
74. '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
75. cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
76. '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
77. a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
78. '<ul class="x-tree-node-ct" style="display:none;"></ul>',
79. "</li>"].join('');
80.
81. var nel;
82. if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
83. this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
84. }else{
85. this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
86. }
87.
88. this.elNode = this.wrap.childNodes[0];
89. this.ctNode = this.wrap.childNodes[1];
90. var cs = this.elNode.childNodes;
91. this.indentNode = cs[0];
92. this.ecNode = cs[1];
93. this.iconNode = cs[2];
94. var index = 3;
95. if(cb){
96. this.checkbox = cs[3];
97. Ext.fly(this.checkbox).on('click', this.check.createDelegate(this,[null]));
98. index++;
99. }
100. this.anchor = cs[index];
101. this.textNode = cs[index].firstChild;
102. },
103.
104. // private
105. check : function(checked){
106. var n = this.node;
107. var tree = n.getOwnerTree();
108. this.checkModel = tree.checkModel || this.checkModel;
109.
110. if( checked === null ) {
111. checked = this.checkbox.checked;
112. } else {
113. this.checkbox.checked = checked;
114. }
115.
116. n.attributes.checked = checked;
117. tree.fireEvent('check', n, checked);
118.
119. if(!this.onlyLeafCheckable && this.checkModel == 'cascade'){
120. var parentNode = n.parentNode;
121. if(parentNode !== null) {
122. this.parentCheck(parentNode,checked);
123. }
124. if( !n.expanded && !n.childrenRendered ) {
125. n.expand(false,false,this.childCheck);
126. }
127. else {
128. this.childCheck(n);
129. }
130. }else if(this.checkModel == 'single'){
131. var checkedNodes = tree.getChecked();
132. for(var i=0;i<checkedNodes.length;i++){
133. var node = checkedNodes[i];
134. if(node.id != n.id){
135. node.getUI().checkbox.checked = false;
136. node.attributes.checked = false;
137. tree.fireEvent('check', node, false);
138. }
139. }
140. }
141.
142. },
143.
144. // private
145. childCheck : function(node){
146. var a = node.attributes;
147. if(!a.leaf) {
148. var cs = node.childNodes;
149. var csui;
150. for(var i = 0; i < cs.length; i++) {
151. csui = cs[i].getUI();
152. if(csui.checkbox.checked ^ a.checked)
153. csui.check(a.checked);
154. }
155. }
156. },
157.
158. // private
159. parentCheck : function(node ,checked){
160. var checkbox = node.getUI().checkbox;
161. if(typeof checkbox == 'undefined')return ;
162. if(!(checked ^ checkbox.checked))return;
163. if(!checked && this.childHasChecked(node))return;
164. checkbox.checked = checked;
165. node.attributes.checked = checked;
166. node.getOwnerTree().fireEvent('check', node, checked);
167.
168. var parentNode = node.parentNode;
169. if( parentNode !== null){
170. this.parentCheck(parentNode,checked);
171. }
172. },
173.
174. // private
175. childHasChecked : function(node){
176. var childNodes = node.childNodes;
177. if(childNodes || childNodes.length>0){
178. for(var i=0;i<childNodes.length;i++){
179. if(childNodes[i].getUI().checkbox.checked)
180. return true;
181. }
182. }
183. return false;
184. },
185.
186. toggleCheck : function(value){
187. var cb = this.checkbox;
188. if(cb){
189. var checked = (value === undefined ? !cb.checked : value);
190. this.check(checked);
191. }
192. }
193. });
使用方法都在注释里了,应该已经很详细了,我就不多说了
需要注意的是, 使用例子里的Tree 使用了Ext.tree.DWRTreeLoader这个扩展类,用来加载后台树结点,这和使用其它的loader没有区别的,
如果您使用其它的loader, 同样加上baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI }就行了
转载自http://www.iteye.com/topic/164426
在ext1.x里,树是没有checkbox的, 幸好在2.X版本里提供了这个功能, 在许多应用里, 带有checkbox的树使用还是很常见的
Ext2.X提供了简单的checkbox实现,但对于一些复杂的需求,如: 级联多选(选中父结点,自选中其所有子结点和所有父结点) , 单选等等, Ext2.X并没有帮我们实现
还有最难解决的情况, 当树是异步的时候, 要想级联多选, 实现起来有些难度
在此, 通过对Ext.tree.TreeNodeUI进行扩展,这些问题都得到很好的解决
1. /**
2. * @class Ext.tree.TreeCheckNodeUI
3. * @extends Ext.tree.TreeNodeUI
4. *
5. * 对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性
6. *
7. * 扩展的功能点有：
8. * 一、支持只对树的叶子进行选择
9. * 只有当返回的树结点属性leaf = true 时，结点才有checkbox可选
10. * 使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false
11. *
12. * 二、支持对树的单选
13. * 只允许选择一个结点
14. * 使用时，只需在声明树时，加上属性 checkModel: "single" 既可
15. *
16. * 二、支持对树的级联多选
17. * 当选择结点时，自动选择该结点下的所有子结点，以及该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中
18. * 使用时，只需在声明树时，加上属性 checkModel: "cascade" 既可
19. *
20. * 三、添加"check"事件
21. * 该事件会在树结点的checkbox发生改变时触发
22. * 使用时，只需给树注册事件,如：
23. * tree.on("check",function(node,checked){...});
24. *
25. * 默认情况下，checkModel为'multiple'，也就是多选，onlyLeafCheckable为false，所有结点都可选
26. *
27. * 使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.tree.TreeCheckNodeUI} 既可.
28. * 例如：
29. * var tree = new Ext.tree.TreePanel({
30. * el:'tree-ct',
31. * width:568,
32. * height:300,
33. * checkModel: 'cascade', //对树的级联多选
34. * onlyLeafCheckable: false,//对树所有结点都可选
35. * animate: false,
36. * rootVisible: false,
37. * autoScroll:true,
38. * loader: new Ext.tree.DWRTreeLoader({
39. * dwrCall:Tmplt.getTmpltTree,
40. * baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } //添加 uiProvider 属性
41. * }),
42. * root: new Ext.tree.AsyncTreeNode({ id:'0' })
43. * });
44. * tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件
45. * tree.render();
46. *
47. */
48.
49. Ext.tree.TreeCheckNodeUI = function() {
50. //'multiple':多选; 'single':单选; 'cascade':级联多选
51. this.checkModel = 'multiple';
52.
53. //only leaf can checked
54. this.onlyLeafCheckable = false;
55.
56. Ext.tree.TreeCheckNodeUI.superclass.constructor.apply(this, arguments);
57. };
58.
59. Ext.extend(Ext.tree.TreeCheckNodeUI, Ext.tree.TreeNodeUI, {
60.
61. renderElements : function(n, a, targetNode, bulkRender){
62. var tree = n.getOwnerTree();
63. this.checkModel = tree.checkModel || this.checkModel;
64. this.onlyLeafCheckable = tree.onlyLeafCheckable || false;
65.
66. // add some indent caching, this helps performance when rendering a large tree
67. this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
68.
69. var cb = (!this.onlyLeafCheckable || a.leaf);
70. var href = a.href ? a.href : Ext.isGecko ? "" : "#";
71. var buf = ['<li class="x-tree-node"><div ext:tree-node-id="',n.id,'" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on">',
72. '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",
73. '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
74. '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon',(a.icon ? " x-tree-node-inline-icon" : ""),(a.iconCls ? " "+a.iconCls : ""),'" unselectable="on" />',
75. cb ? ('<input class="x-tree-node-cb" type="checkbox" ' + (a.checked ? 'checked="checked" />' : '/>')) : '',
76. '<a hidefocus="on" class="x-tree-node-anchor" href="',href,'" tabIndex="1" ',
77. a.hrefTarget ? ' target="'+a.hrefTarget+'"' : "", '><span unselectable="on">',n.text,"</span></a></div>",
78. '<ul class="x-tree-node-ct" style="display:none;"></ul>',
79. "</li>"].join('');
80.
81. var nel;
82. if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){
83. this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
84. }else{
85. this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
86. }
87.
88. this.elNode = this.wrap.childNodes[0];
89. this.ctNode = this.wrap.childNodes[1];
90. var cs = this.elNode.childNodes;
91. this.indentNode = cs[0];
92. this.ecNode = cs[1];
93. this.iconNode = cs[2];
94. var index = 3;
95. if(cb){
96. this.checkbox = cs[3];
97. Ext.fly(this.checkbox).on('click', this.check.createDelegate(this,[null]));
98. index++;
99. }
100. this.anchor = cs[index];
101. this.textNode = cs[index].firstChild;
102. },
103.
104. // private
105. check : function(checked){
106. var n = this.node;
107. var tree = n.getOwnerTree();
108. this.checkModel = tree.checkModel || this.checkModel;
109.
110. if( checked === null ) {
111. checked = this.checkbox.checked;
112. } else {
113. this.checkbox.checked = checked;
114. }
115.
116. n.attributes.checked = checked;
117. tree.fireEvent('check', n, checked);
118.
119. if(!this.onlyLeafCheckable && this.checkModel == 'cascade'){
120. var parentNode = n.parentNode;
121. if(parentNode !== null) {
122. this.parentCheck(parentNode,checked);
123. }
124. if( !n.expanded && !n.childrenRendered ) {
125. n.expand(false,false,this.childCheck);
126. }
127. else {
128. this.childCheck(n);
129. }
130. }else if(this.checkModel == 'single'){
131. var checkedNodes = tree.getChecked();
132. for(var i=0;i<checkedNodes.length;i++){
133. var node = checkedNodes[i];
134. if(node.id != n.id){
135. node.getUI().checkbox.checked = false;
136. node.attributes.checked = false;
137. tree.fireEvent('check', node, false);
138. }
139. }
140. }
141.
142. },
143.
144. // private
145. childCheck : function(node){
146. var a = node.attributes;
147. if(!a.leaf) {
148. var cs = node.childNodes;
149. var csui;
150. for(var i = 0; i < cs.length; i++) {
151. csui = cs[i].getUI();
152. if(csui.checkbox.checked ^ a.checked)
153. csui.check(a.checked);
154. }
155. }
156. },
157.
158. // private
159. parentCheck : function(node ,checked){
160. var checkbox = node.getUI().checkbox;
161. if(typeof checkbox == 'undefined')return ;
162. if(!(checked ^ checkbox.checked))return;
163. if(!checked && this.childHasChecked(node))return;
164. checkbox.checked = checked;
165. node.attributes.checked = checked;
166. node.getOwnerTree().fireEvent('check', node, checked);
167.
168. var parentNode = node.parentNode;
169. if( parentNode !== null){
170. this.parentCheck(parentNode,checked);
171. }
172. },
173.
174. // private
175. childHasChecked : function(node){
176. var childNodes = node.childNodes;
177. if(childNodes || childNodes.length>0){
178. for(var i=0;i<childNodes.length;i++){
179. if(childNodes[i].getUI().checkbox.checked)
180. return true;
181. }
182. }
183. return false;
184. },
185.
186. toggleCheck : function(value){
187. var cb = this.checkbox;
188. if(cb){
189. var checked = (value === undefined ? !cb.checked : value);
190. this.check(checked);
191. }
192. }
193. });
使用方法都在注释里了,应该已经很详细了,我就不多说了
需要注意的是, 使用例子里的Tree 使用了Ext.tree.DWRTreeLoader这个扩展类,用来加载后台树结点,这和使用其它的loader没有区别的,
如果您使用其它的loader, 同样加上baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI }就行了