ExtJs checkbox绑定click事件实现全选

需求

在ExtJs中 xtype: checkboxfield和checkbox只封装了change事件监听，

而且Ext绑定的事件是基于订阅者模式的，当我们想实现如下的全部选择时，会发生不可避免的冲突

这时，我们只需要单纯的点击触发事件

代码

点击触发事件

listeners:{  
    afterrender:function(obj){  
        obj.getEl().dom.onclick = function(){  
            //事件触发事件
        };  
    }  
}  

全部选择代码

 {
    xtype: "checkbox",
    id:"selectPipeType",
    width:50,
    height:30,
    boxLabel:"全部",
    listeners:{
        afterrender:function(obj){
            obj.getEl().dom.onclick = function(){
                var selectPipeType = Ext.getCmp("selectPipeType");
                var pipeColumn01 = Ext.getCmp("pipeColumn01");
                var pipeColumn02 = Ext.getCmp("pipeColumn02");
                if(selectPipeType.checked){
                    selectAllChecked = true;
                    for(var i=0; i<pipeColumn01.items.items.length;i++){
                        pipeColumn01.items.items[i].setValue(true);
                    }
                    for(var k=0; k<pipeColumn02.items.items.length;k++){
                        pipeColumn02.items.items[k].setValue(true);
                    }
                }
                else{
                    selectAllChecked = false;
                    for(var i=0; i<pipeColumn01.items.items.length;i++){
                        pipeColumn01.items.items[i].setValue(false);
                    }
                    for(var k=0; k<pipeColumn02.items.items.length;k++){
                        pipeColumn02.items.items[k].setValue(false);
                    }
                }
            };
        }
    },
    handler:function(data,value){

    }
}

子选项点击触发事件

 {
                    layout:"column",
                    id:"pipeColumn01",
                    border:0,
                    items:[
                        {
                            xtype:"checkbox",
                            width:50,
                            height:20,
                            boxLabel:"给水",
                            id:"jsCustomService",
                            margin:"0 0 0 95",
                            listeners:{
                                afterrender:function(obj){
                                    obj.getEl().dom.onclick = function(){
                                       pipeItemChange();
                                    };
                                }
                            }
                        },

  //  管线类型子选项的change事件
        function pipeItemChange() {
            var pipeColumn01 = Ext.getCmp("pipeColumn01");
            var pipeColumn02 = Ext.getCmp("pipeColumn02");
            for(var i=0; i<pipeColumn01.items.items.length;i++){
                if(!pipeColumn01.items.items[i].checked){
                    Ext.getCmp("selectPipeType").setValue(false);
                    return;
                }
            }
            for(var k=0; k<pipeColumn02.items.items.length;k++){
                if(!pipeColumn02.items.items[k].checked){
                    Ext.getCmp("selectPipeType").setValue(false);
                    return;
                }
            }
            Ext.getCmp("selectPipeType").setValue(true);
        }