ExtJs checkbox绑定click事件实现全选

淡淡的烟草味﹌ 2021-09-14 11:34 573阅读 0赞

### 需求 ###

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

![这里写图片描述][SouthEast]

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

![这里写图片描述][SouthEast 1]

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

### 代码 ###

#### 点击触发事件 ####

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

[SouthEast]: /images/20210726/5e78d947c9c644d881e1102743f23fb0.png
[SouthEast 1]: /images/20210726/79f486be152e453f8e4a8dec6068b054.png