ExtJS 4.2 创建带复选框的树，并且有全选反选功能

var store = Ext.create(‘Ext.data.TreeStore,{//注意：store的数据后台返回时需要加
checked:false 属性；

    fields:['text','id'],

    root: {

        id:'root',

        expanded: true,

        "checked": false,

        text:''

    },

    proxy: {

        type: 'ajax',

        url: url,

       

    },

 

    autoLoad: false

})

Ext.create('Ext.tree.Panel',{

   xtype：'treepanel',//这里如果用treepicker的话，就监听不到checkChange方法

    width:300,

    height:300,

    name:'tree',

    store:store,

    listeners:{

        'checkChange':function(node,checked){//用此方法监听

             childChecked(node,checked)

             parentChecked(node,checked)；

        }

    }

})

//反选

function parentChecked(node, checked, opts){

 

    var upNode = node.parentNode;

    if(upNode != null){

        var opts = {};

        opts["isPassive"] = true;

       

        var upChecked = upNode.data.checked;

        //选中状态，遍历父节点，判断有父节点下的子节点是否都全选

        if(checked){

            var allChecked = true;

          

            upNode.eachChild(function (child) {

                if(!child.data.checked){

                    allChecked = false;

                    return false;

                }

            });

            upNode.set('checked', allChecked);//updateInfo()有看到这个方法,但在这不行

            if(allChecked){

                travelParentChecked(upNode, allChecked, opts);

            }else{

                //travelParentChecked(upNode, allChecked, opts);

            }

        }else{

            if(upNode.data.checked){

                upNode.set('checked', checked);

                travelParentChecked(upNode, checked, opts);

            }else{

                //travelParentChecked(upNode, allChecked, opts);

            }

        }

    }

}

//全选

function childChecked(node,checked){

 

    checked?node.expand():node.collapse();

    if(node.hasChildNodes()){

        node.eachChild(function(n) {

            

         

            n.set('checked', checked)

            //n.updateInfo({checked:checked});

            if(n.hasChildNodes()){

                n.expand();

                allChild(n,checked);

            }

        });

    }

}
效果：