ExtJs checkbox绑定click事件实现全选-蒲公英云

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);
        }