ExtJs checkbox绑定click事件实现全选 淡淡的烟草味﹌ 2021-09-14 11:34 509阅读 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
还没有评论,来说两句吧...