81.Ext TreePanel实现单选等功能

转自：https://blog.csdn.net/iteye_7988/article/details/81886654

在ext1.x里,树是没有checkbox的, 幸好在2.X版本里提供了这个功能, 在许多应用里, 带有checkbox的树使用还是很常见的

Ext2.X提供了简单的checkbox实现,但对于一些复杂的需求,如: 级联多选(选中父结点,自选中其所有子结点和所有父结点) , 单选等等, Ext2.X并没有帮我们实

还有最难解决的情况, 当树是异步的时候, 要想级联多选, 实现起来有些难度

在此, 通过对Ext.tree.TreeNodeUI进行扩展,这些问题都得到很好的解决

对 Ext.tree.TreeNodeUI 进行checkbox功能的扩展,后台返回的结点信息不用非要包含checked属性

扩展的功能点有：
一、支持只对树的叶子进行选择
 

   只有当返回的树结点属性leaf = true 时，结点才有checkbox可选
    使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false

二、支持对树的单选
    只允许选择一个结点
    使用时，只需在声明树时，加上属性 checkModel: "single" 既可

三、支持对树的级联多选
    当选择结点时，自动选择该结点下的所有子结点，或该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中
    使用时，只需在声明树时，加上属性 checkModel: "cascade" 或"parentCascade"或"childCascade"既可
    cascade ：级联选中所有父结点和子结点
    parentCascade ：级联选中所有父结点
    childCascade  ：级联选中所有子结点

四、添加"check"事件
    该事件会在树结点的checkbox发生改变时触发
    使用时，只需给树注册事件,如：
    tree.on("check",function(node,checked){...});

默认情况下，checkModel为 'multiple'，也就是多选；onlyLeafCheckable为false，所有结点都可选

使用方法：在loader里加上 baseAttrs:{uiProvider:Ext.ux.TreeCheckNodeUI} 既可.

例如：
Js代码

Java代码  

1. var tree = new Ext.tree.TreePanel({     
2.     el:'tree-ct',     
3.     width:568,     
4.     height:300,     
5.     checkModel: 'cascade',   // 对树的级联多选     
6.     onlyLeafCheckable: false,//对树所有结点都可选     
7.     animate: false,     
8.     rootVisible: false,     
9.     autoScroll:true,     
10.         dwrCall:Tmplt.getTmpltTree,     
11.         baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } //添加uiProvider属性     
12.     }),     
13.     root: new Ext.tree.AsyncTreeNode({ id:'0' })     
14. });     
15. tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件     
16. tree.render();     
17.   
18.    var tree = new Ext.tree.TreePanel({   
19.        el:'tree-ct',   
20.        width:568,   
21.        height:300,   
22.        checkModel: 'cascade',   //对树的级联多选   
23.        onlyLeafCheckable: false,//对树所有结点都可选   
24.        animate: false,   
25.        rootVisible: false,   
26.        autoScroll:true,   
27.        loader: new Ext.tree.DWRTreeLoader({   
28.            dwrCall:Tmplt.getTmpltTree,   
29.            baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI }//添加uiProvider属性   
30.        }),   
31.        root: new Ext.tree.AsyncTreeNode({ id:'0' })   
32.    });   
33.    tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件   
34.    tree.render();  

需要注意的是, 使用例子里的Tree 使用了Ext.tree.DWRTreeLoader这个扩展类,用来加载后台树结点,这和使用其它的loader没有区别的,

如果您使用其它的loader, 同样加上 baseAttrs: { uiProvider: Ext.ux.TreeCheckNodeUI } 就行了

Java代码  

1. 实现单选功能：   
2. this.on('checkchange',this.check,this);   
3. getNodes:function(treePanel){   
4.         var startNode = treePanel.getRootNode();   
5.         var r = [];   
6.         var f = function(){   
7.                 r.push(this);   
8.         };   
9.   
10.         startNode.cascade(f);   
11.         return r;   
12. },   
13. check : function(node,bool) {   
14.         if(!bool){   
15.             return;   
16.         }   
17.         if(this.checkModel=='single'){   
18.             var nodes =this.getNodes(this);   
19.             if(nodes && nodes.length>0){   
20.                 for(var i=0,len=nodes.length;i
21.                     if(nodes[i].id!=node.id){   
22.                         if(nodes[i].getUI().checkbox){   
23.                             nodes[i].getUI().checkbox.checked = false;   
24.                                 nodes[i].attributes.checked=false;   
25.                         }   
26.                     }   
27.                 }   
28.             }   
29.         }   
30.     }