Ext带复选框的Tree实现父子节点联动功能

昨晚有一个朋友问我EXT中带复选框的Tree控件是否可以实现节点被选中时父子节点联动的功能，之前做树形控件，一直都是在用Z-Tree的，速度快，功能强，这样的功能需求对于Z-Tree来说，完全小意思，原生API就可以支持的，偏偏到了EXT这里，就不行了。Ext本身是可以通过在节点属性中增加checked属性将一个普通节点变成带复选框的节点，但是奇怪的是，不支持父子节点联动功能，好怪异。

我觉得这个功能蛮简单的，刚好今天下午也有空，就自己写了一个demo，通过监听节点的checkchange事件来实现该功能，思路如下：

1. 如果当前节点为父节点，则将当前节点的选中状态同步到所有的子节点；
2. 如果当前节点被选中，则递归选中所有的祖先节点；
3. 代码如下：

4. Ext.require([
       'Ext.tree.*',
       'Ext.data.*',
       'Ext.window.MessageBox'
   ]);
   
   Ext.onReady(function() {
     //树数据存储器
       var store = Ext.create('Ext.data.TreeStore', {
           proxy: {
         //通过ajax代理获取数据
               type: 'ajax',
               url: 'check-nodes.json'
           },
       //排序器,可以没有
           sorters: [{
               property: 'leaf',
               direction: 'ASC'
           }, {
               property: 'text',
               direction: 'ASC'
           }]
       });
   
       var tree = Ext.create('Ext.tree.Panel', {
       //指定数据源
           store: store,
       //是否显示根节点
           rootVisible: false,
       //是否箭头图标
           useArrows: true,
       //是否以框架显示
           frame: true,
       //标题
           title: '多级节点联动树演示',
       //树结构的容器ID
           renderTo: 'tree-div',
       //树面板宽度
           width: 200,
       //树面板高度
           height: 250,
       //事件监听器
       listeners: {
         //监听复选框的选中属性改变事件
               checkchange : function(node,checked){
           //获得父节点
           pNode = node.parentNode;
           //改变当前节点的选中状态
           node.checked = checked;
           //判断当前节点是否为叶子节点
           var isLeaf = node.isLeaf();
           //当该节点有子节点时,将所有子节点的选中状态同化
           if (!isLeaf){
             //cascade是指从当前节点node开始逐层下报，即遍历当前节点的每一个节点(无论有多少层级结构,详参API)
             node.cascade(function(node){
               node.set("checked", checked);
             });
           }
           //如果当前节点是选中状态
           if (checked == true) {
             //将当前节点的所有未选中的父节点选中
             for (;pNode != null && !pNode.get("checked");pNode = pNode.parentNode) {
               pNode.set("checked", true);
             }
           }else{
             //取消当前节点的所有不包含选中的子节点的父节点的选中状态
             for (;pNode != null;pNode = pNode.parentNode) {	
               //如果当前的父节点包含选中的子节点，则终止搜索过程
               if(hasCheckedNode(pNode)){
                 break;
               }else{
                 //否则取消当前父节点的选中状态
                 pNode.set("checked", false);
               }
             }
           }
         }
           }
       });
     //检查指定的父节点是否包含有选中的子节点
     function hasCheckedNode(node){
       var has = false;
       //当前节点是否含有子节点
       if(node.childNodes){
         //遍历子节点
         Ext.each(node.childNodes, function(item){
           //如果当前节点是叶子节点
           if(item.isLeaf()){
             //遇到选中的子节点时终止搜索过程
             if(has = item.get("checked")){
               return false;
             }
           //遇到含有选中的子节点的父节点时终止搜索过程
           }else if(has = hasCheckedNode(item)){
             return false;
           }
         });
       }
       return has;
     }
   });