效果图：
简介：当勾选【全选】checkbox时，其余checkbox都要选中，当取消【全选】checkbox时，其余checkbox都要取消。
这一点很容易实现。
但是，当勾选【全选】checkbox时，其余checkbox都要选中，当取消其余checkbox中的任意一项时，【全选】checkbox需要取消勾选。
这一点会有问题，笔者遇到的就是可以取消【全选】checkbox，但同时其余checkbox也都取消了。这TM就尴尬了。
解决的方法：
在 Ext.getCmp("allSelectCheckbox").setValue(false); 之前加一句 Ext.getCmp("allSelectCheckbox").checked = false;
就是说，再给勾选【全选】checkbox 执行setValue() 函数之前 先直接赋值，也就是说setValue(false) 之前该checkbox的值已经是false了。
问题来了，也许你觉得那有了.checked = false 那么 setValue(false) 不是多此一举吗？ 其实不然，如果只有前者的话，虽然这个checkbox值为false，但是前台显示的效果还是处于勾选状态，需要通过 setValue() 来刷新一下显示效果。
具体代码如下：
【全选】checkbox：
<span style="font-size:14px;">allSelectCheckbox: {
width:20,
margins:"15 0 15 20",
listeners: {
check: function () {
var tmp = Ext.getCmp("allSelectCheckbox");
if (Ext.getCmp("magazineTableContent")) {
var checkGroup = Ext.getCmp("magazineTableContent").items.items;
for (var i = 0; i < checkGroup.length; i++) {
var tmpCheck = checkGroup[i];
tmpCheck.items.items[0].setValue(tmp.getValue());
}
}
}
}
},</span>其余【单个】checkbox：
<span style="font-size:14px;">magazineTableRow0:{
width:20,
margins:"15 0 15 26",
listeners:{
check:function(){
var cmp = this.ownerCt;
if (this.checked == true) {
cmp.addClass("magazineTableRowSelected");
} else {
cmp.removeClass("magazineTableRowSelected");
Ext.getCmp("allSelectCheckbox").checked = false;
Ext.getCmp("allSelectCheckbox").setValue(false);
}
}
}
},</span>
