Ext.Tree扩展CheckBox方法

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 class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls,'" unselectable="on" ext:tree-node-id="',n.id,'">',   
72. '<span class="x-tree-node-indent">',this.indentMarkup,"</span>",   
73. '<img class="x-tree-ec-icon x-tree-elbow" alt="" src="', this.emptyIcon, '">',   
74. '<img class="x-tree-node-icon',(a.icon ? " alt="" unselectable="on" src="', a.icon || this.emptyIcon, '">',   
75. cb ? ('<input class="x-tree-node-cb" type="checkbox" value="on">' : '/>')) : '',   
76. '<a class="x-tree-node-anchor" hidefocus="hidefocus" tabindex="1" target="'+a.hrefTarget+'" a.hreftarget="" href="',href,'"></a></div>",   
77. '<ul class="x-tree-node-ct" style="DISPLAY: none"> </ul>',   
78. ""].join('');   
79.   
80. var nel;   
81. if(bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl())){   
82. this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);   
83. }else{   
84. this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);   
85. }   
86.   
87. this.elNode = this.wrap.childNodes[0];   
88. this.ctNode = this.wrap.childNodes[1];   
89. var cs = this.elNode.childNodes;   
90. this.indentNode = cs[0];   
91. this.ecNode = cs[1];   
92. this.iconNode = cs[2];   
93. var index = 3;   
94. if(cb){   
95. this.checkbox = cs[3];   
96. Ext.fly(this.checkbox).on('click', this.check.createDelegate(this,[null]));   
97. index++;   
98. }   
99. this.anchor = cs[index];   
100. this.textNode = cs[index].firstChild;   
101. },   
102.   
103. // private   
104. check : function(checked){   
105. var n = this.node;   
106. var tree = n.getOwnerTree();   
107. this.checkModel = tree.checkModel || this.checkModel;   
108.   
109. if( checked === null ) {   
110. checked = this.checkbox.checked;   
111. } else {   
112. this.checkbox.checked = checked;   
113. }   
114.   
115. n.attributes.checked = checked;   
116. tree.fireEvent('check', n, checked);   
117.   
118. if(!this.onlyLeafCheckable && this.checkModel == 'cascade'){   
119. var parentNode = n.parentNode;   
120. if(parentNode !== null) {   
121. this.parentCheck(parentNode,checked);   
122. }   
123. if( !n.expanded && !n.childrenRendered ) {   
124. n.expand(false,false,this.childCheck);   
125. }   
126. else {   
127. this.childCheck(n);   
128. }   
129. }else if(this.checkModel == 'single'){   
130. var checkedNodes = tree.getChecked();   
131. for(var i=0;i0){   
132. for(var i=0;i</li>