首页 > 代码库 > ExtJs实现复选框组Checkboxgroup单勾选及复选框组对多个复选框组跨控件全选
ExtJs实现复选框组Checkboxgroup单勾选及复选框组对多个复选框组跨控件全选
ExtJs实现复选框Checkboxgroup单勾选及跨控件全选
由于项目的需要，我们要将EXT的控件Checkboxgroup复选框组改造成但勾选，并且实现一个复选框组控制其他多个复选框组的全选，以下是关于如何实现的代码片段。
1.创建CheckboxGroup对象
1，新建空的EOS6.5的工程，新建com.towngas.tcis. gridlock构件包；
2，在com.towngas.tcis.gridlock构件包的“展现”节点下的“页面资源”节点中创建一个文件夹，命名为gridlock；
3，在新建的文件夹中创建gridlockUi.js文件，gridlockEv.js文件。
4，在gridlockUi.js文件中创建对象：
varfieldAllSelect = newExt.form.CheckboxGroup({
xtype: ‘checkboxgroup‘,
fieldLabel: ‘全选‘,
itemCls: ‘x-check-group-alt‘,
// Put all controls in a single column with width 100%
columns : 8,
items: [
{boxLabel: ‘全选1‘, name: ‘0‘,checked: false,
}},
{boxLabel: ‘全选2‘, name:‘1‘,checked: false,
}},
{boxLabel: ‘全选3‘, name:‘2‘,checked: false,
}},
{boxLabel: ‘全选4‘, name:‘3‘,checked: false,
}},
{boxLabel: ‘全选5‘, name:‘4‘,checked: false,
}}
]
});
2.扩展CheckboxGroup的单选方法
对创建的CheckboxGroup对象扩展增加方法singlecheck，参数为CheckboxGroup对象以及，复选框的选项items的索引，内容如下：
singlecheck: function (ChkGrp, index) {
if (ChkGrp.items.itemAt(index).checked) {
for (var i = 0; i <ChkGrp.items.length; i++) {
if (i != index) {
if(ChkGrp.items.itemAt(i).checked) {
var id =ChkGrp.items.itemAt(i).id;
ChkGrp.setValue(id,false);
}
}
}
}
}
3.编写CheckboxGroup的items选项的监听事件
在创建的CheckboxGroup对象fieldAllSelect中，增加对fieldAllSelect的items的“check”选中的监听事件，内容如下：
items: [
{boxLabel: ‘全选1‘, name: ‘0‘,checked: false,
listeners : {
‘check‘:function(){
fieldAllSelect.singlecheck(fieldAllSelect,0);
}
}},
{boxLabel: ‘全选2‘, name:‘1‘,checked: false,
listeners : {
‘check‘:function(){
fieldAllSelect.singlecheck(fieldAllSelect,1);
}
}},
{boxLabel: ‘全选3‘, name:‘2‘,checked: false,
listeners : {
‘check‘:function(){
fieldAllSelect.singlecheck(fieldAllSelect,2);
}
}},
{boxLabel: ‘全选4‘, name:‘3‘,checked: false,
listeners : {
‘check‘:function(){
fieldAllSelect.singlecheck(fieldAllSelect,3);
}
}},
{boxLabel: ‘全选5‘, name:‘4‘,checked: false,
listeners : {
‘check‘:function(){
fieldAllSelect.singlecheck(fieldAllSelect,4);
}
}}
]
此时，已经实现了CheckboxGroup复选框变成只能都选一个选项的单勾选框，满足了客户需求。
4.复选框CheckboxGroup单选的实际效果
在之前创建的内容之后，实现了复选框都勾选一个选项，如图所示：
勾选“全选1”出现如下图所示的效果：
勾选“全选2”之后，“全选1”出于不勾选状态，如下图所示的效果：
5.另外一种单勾选实现方法
在之前创建的内容之后，实现了复选框都勾选一个选项，下面的内容是另外一种方法实现单勾选功能，内容如下：
…… this. firstInputValue = http://www.mamicode.com/null;
fieldCfg = {
xtype :‘dictcheckboxgroup‘,
dictData :SQ_CONPARAM_APPROVELEVEL,
itemCls :‘x-check-group-alt‘,
columns : 8,
id :this.checkGroupId,
allowBlank :false,
blankText :"不能全为空，请勾选一项!",
clearValue :function() { // 清空所有值
this.items.each(function(item){
item.setValue(false);
});
},
nocheckValue: function(index) { // 不选中某值
if(this.items.itemAt(index)){
this.items.itemAt(index).setValue(false);
}
},
checkValue :function(index) { // 选中某值
if(this.items.itemAt(index)){
this.items.itemAt(index).setValue(true);
}
},
uncheckValue: function(box) { // 不选中某值
this.items.each(function(item) {
if(box.inputValue != item.inputValue) {
item.setValue(false);
}
});
},
listeners : {
‘change‘: function(checkgroup, checkedBoxs) {
if(checkedBoxs.length == 1) {
this.firstInputValue = http://www.mamicode.com/checkedBoxs[0];
}
if(checkedBoxs.length == 2) {
varsbox = null;
for(var n = 0; n < checkedBoxs.length; n++) {
if(this.firstInputValue != checkedBoxs[n]) {
sbox= checkedBoxs[n];
}
}
for(var i = 0; i < checkgroup.items.length; i++) {
if(sbox != checkgroup.items.itemAt(i)) {
checkgroup.items.itemAt(i)
.setValue(false);
}
}
}
}
}
}
……
6.对CheckboxGroup扩展实现跨控件全选功能
完成了以上的步骤，两个不同的CheckboxGroup单勾选功能已经实现，我们对这两个不同的控件，实现了跨控件的全选功能，就是一个CheckboxGroup控制一组CheckboxGroup的全选功能。具体实现内容如下：
listeners : {
‘change‘ :function(checkgroup, checkedBoxs) {
var cbitems = checkgroup.items;
for (var i = 0; i < cbitems.length; i++) {
if (cbitems.itemAt(i).checked) {
var index =cbitems.itemAt(i).name;
//获取下面对应的勾选框
vardictcheckboxgroups =
schemeLoadSelf.findByType(‘dictcheckboxgroup‘);
for(var j=0;j< dictcheckboxgroups.length; j++){
var len =dictcheckboxgroups[j].items.length;
if(index<=len){
//勾选指定索引项
dictcheckboxgroups[j].checkValue(index);
}
}
}else{
var index =cbitems.itemAt(i).name;
//获取下面对应的勾选框
var dictcheckboxgroups =
schemeLoadSelf.findByType(‘dictcheckboxgroup‘);
for(var j=0;j < dictcheckboxgroups.length;j++){
varlen = dictcheckboxgroups[j].items.length;
if(index<=len){
//取消勾选指定索引项
dictcheckboxgroups[j].nocheckValue(index);
}
}
}
}
}
}
7.测试复选框跨控件控制一组复选框全选功能
此时整个界面已开发完成，我们完成了对CheckboxGroup多选框全选一组复选框的功能，如下图所示：
勾选“全选1”勾选框，下面一组复选框勾选各自的第一项，如图所示：
勾选“全选2”勾选框，下面一组复选框勾选各自的第二项，如图所示：
勾选“全选3”勾选框，下面一组复选框勾选各自的第三项，如图所示：
通过以上的几个步骤，可以实现在EXT前台框架下对复选框的方法的扩展满足用户需求和提高用户体验。该种方式从一定程度上来说背离了EXT3.4的原生态的使用原则，从这一点上来说，需要我们在开发EXT界面时，对有些不常见的EXT界面控件特性的扩展，从而实现界面的可操作性以及友好性。
ExtJs实现复选框组Checkboxgroup单勾选及复选框组对多个复选框组跨控件全选