最简单Ext.Tree扩展CheckBox的方法

 
 
 

<script language=javascript type=text/javascript>

var tree = null;
var txtChkValue = document.getElementById("txtChkValue");
Ext.onReady(function(){

    Ext.BLANK_IMAGE_URL = "../../Js/extjs2/resources/images/default/s.gif"
    // shorthand
    var Tree = Ext.tree;
    
    tree = new Tree.TreePanel({
        el:'tree-div',
        autoScroll:true,
        animate:true,
        enableDD:false,
        containerScroll: true, 
        onlyLeafCheckable: false,//对树所有结点都可选 
        loader: new Tree.TreeLoader({
            dataUrl:'../../getTreeData.aspx'            
        }),
        margins:'15,15,15,15',
        border:false        
    });
    
    tree.on('checkchange', function(node, checked) {
                    node.expand();
                    node.attributes.checked = checked;
                    var parentNode = node.parentNode;
                    if(checked){
                        if(parentNode!=null&&parentNode.id!='source'){
                            //如果是选中,把父节点保持选中状态
                            parentNode.ui.toggleCheck(true);
                            parentNode.attributes.checked = true;
                        }
                    }else{
                        //如果所有子节点都没选中，取消根节点选中状态
                        if(parentNode!=null&&parentNode.id!='source'){
                            var chk = false;
                            parentNode.eachChild(function(child) {
                                if(child.attributes.checked)chk=true;
                            });
                            parentNode.ui.toggleCheck(chk);
                            parentNode.attributes.checked = chk;
                        }
                    }
                    node.eachChild(function(child) {
                        child.ui.toggleCheck(checked);
                        child.attributes.checked = checked;
                        child.fireEvent('checkchange', child, checked);
                    });
                    txtChkValue.value = tree.getChecked('id');
                }, tree);

    // set the root node
    var root = new Tree.AsyncTreeNode({
        text: '请选择要生成的栏目',
        draggable:false,
        id:'source'
    });
    tree.setRootNode(root);

    // render the tree
    tree.render();
    root.expand();
});

</script>