需求
在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();
};
}
}
},
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);
}