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

   

 扩展的功能点有：   

 一、支持只对树的叶子进行选择   

     只有当返回的树结点属性leaf = true 时，结点才有checkbox可选   

     使用时，只需在声明树时，加上属性 onlyLeafCheckable: true 既可，默认是false   

   

 二、支持对树的单选   

     只允许选择一个结点   

     使用时，只需在声明树时，加上属性 checkModel: "single" 既可   

   

 二、支持对树的级联多选   

     当选择结点时，自动选择该结点下的所有子结点，以及该结点的所有父结点（根结点除外），特别是支持异步，当子结点还没显示时，会从后台取得子结点，然后将其选中/取消选中   

     使用时，只需在声明树时，加上属性 checkModel: "cascade" 既可   

   

 三、添加"check"事件   

     该事件会在树结点的checkbox发生改变时触发   

     使用时，只需给树注册事件,如：   

     tree.on("check",function(node,checked){...});   

   

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

   

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

 例如：   

    var tree = new Ext.tree.TreePanel({   

       el:'tree-ct',   

       width:568,   

       height:300,   

       checkModel: 'cascade',    //对树的级联多选   

       onlyLeafCheckable: false,//对树所有结点都可选   

       animate: false,   

       rootVisible: false,   

       autoScroll:true,   

       loader: new Ext.tree.DWRTreeLoader({   

           dwrCall:Tmplt.getTmpltTree,   

           baseAttrs: { uiProvider: Ext.tree.TreeCheckNodeUI } //添加 uiProvider 属性   

       }),   

       root: new Ext.tree.AsyncTreeNode({ id:'0' })   

   });   

   tree.on("check",function(node,checked){alert(node.text+" = "+checked)}); //注册"check"事件

 

//添加监听 实现复选框的级联

tree.on('checkchange', function (node, checked) {

    node.expand();

    node.attributes.checked = checked;

    node.eachChild(function (child) {

        child.ui.toggleCheck(checked);

        child.attributes.checked = checked;

        child.fireEvent('checkchange', child, checked);

    });

}, fileListTree);