Ext TreePanelrcheckbox级联选择的实现（转自ITEYE）

Ext的treepanel 没有自带checkbox级联选择效果，因为用得着，所以自己动手写了个， 现将代码分享一下， 欢迎批评指正。 
由于我在改变节点复选框的选中状态后没有调用其onCheckChange()方法, 所以在获取已选中的节点时不能使用tree.getSelected()方法. 于是自己也相应为自己的级联添加了getSelected()方法.代码是用editplus写的, 没有用IDE, 为节省功夫, 注释不是很规范, 请见谅.

 

下面是测试代码：

 

Ext.onReady(function(){
    var root=new Ext.tree.TreeNode({
        text:"root",
        id:"root",
        checked:false
    });
    var tree=new Ext.tree.TreePanel({
        renderTo:Ext.getBody(),
        width:200,
        root:root,
        listeners:{
            "checkchange": function(node){
                cascadeCheck(node);
            }
        },
        buttons:[{
            text:"显示已选",
            handler:function(){
                var selected=getSelected(root);
                //alert(selected.length);
            }
        }]
    });

    for(var first=0;first<3;first++){
        var flNode=new Ext.tree.TreeNode({
            text:"第一级目录_"+first,
            id:"first_level_"+first,
            checked:false
        });
        root.appendChild(flNode);

        for(var second=0;second<3;second++){
            var slNode=new Ext.tree.TreeNode({
                text:"第二级目录_"+first+"_"+second,
                checked:false,
                id:"second_level_"+first+"_"+second
            });
            flNode.appendChild(slNode);

            for(var third =0;third<3;third++){
                var tlNode=new Ext.tree.TreeNode({
                    text:"第三级目录_"+first+"_"+second+"_"+third,
                    id:"third_level_"+first+"_"+second+"_"+third
                });
            }
        }
    }

    tree.expandAll();
    
});


function cascadeCheck(node){
    //调用函数改变子孙节点的状态
    changeChildrenStatus(node,isChecked(node));

    //调用函数改变祖先节点的状态
    changeParentStatus(node);

    //函数: 改变改变子孙节点的状态
    function changeChildrenStatus(node,checked){
        if(node.hasChildNodes()){
            node.eachChild(function(child){
                changeChildrenStatus(child,checked);
            });
        }
        node.ui.checkbox.checked=checked;
    }

    //函数: 改变祖先节点的状态
    function changeParentStatus(node){
        var parent=node.parentNode;
        if(!parent){
            return ;
        }

        var siblings=getSiblings(node);

        var checked=true;
        for(var i=0;i<siblings.length;i++){
            if(!isChecked(siblings[i])){
                checked=false;
            }
        }
        
        setChecked(parent, checked);
        changeParentStatus(parent);
    }

    //函数:得到节点的兄弟节点
    function getSiblings(node){
        var siblings=[];
        var parent=node.parentNode;
        if(parent){
            parent.eachChild(function(sibling){
                siblings.push(sibling);
            });
        }
        return siblings;
    }
}

//如果节点前的checkbook已被选中, 返回true, 否则返回false
function isChecked(node){
    return node.ui.checkbox.checked;
}

//将节点前的checkbook的选中状态设为checked
function setChecked(node, checked){
    node.ui.checkbox.checked=checked;
}

//得到一个节点下所有被选中的节点, 返回值为一节点数组 
function getSelected(root){
    var selected=[];

    if(isChecked(root)){
        selected.push(root);
    }
    
    root.eachChild(function(child){
        selected=selected.concat(getSelected(child));
    });

     return selected;
}