ExtJs checkbox绑定click事件实现全选

来源：互联网发布：超牛手机数据恢复软件编辑：程序博客网时间：2024/06/04 23:22

需求

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

阅读全文

0 0