EXTJS 4.2 资料 控件之checkboxgroup的用法（动态数据）

在开发中遇到两种情况：第一在新增窗体时，要动态加载CheckBox项；第二在修改时不但需要加载所有CheckBox项，还要并且选中之前新增时的选项

如图这是在修改页面的效果：



1.在新增窗体中动态加载checkboxgroup

1.1在新增窗体代码片段：

{
xtype: 'panel',
width: 750,
border: false,
flex: 2,
items: [{
xtype: 'checkboxgroup',
id: 'lblOperationBehavior',
name: 'lblOperationBehavior',
itemCls: 'x-check-group-alt',
columns: 4,
fieldLabel: '设定权限',
labelWidth: 100,
width: 750,
align: 'left',
border: true,
anchor: '100%', flex: 1,
listeners: {
render: function (view, opt) {
LoadingOperationBehavior();
}
}
}]
},

1.2方法LoadingOperationBehavior()

//加载操作全部名称
function LoadingOperationBehavior() {
//通过extjs的ajax获取操作全部名称
Ext.Ajax.request({
url: '/ProjectWeb/HttpHandlerData/MemberManagement/MemberManagement.ashx?operation=SearchOperationBehavior',
success: function (response) {
var obj = eval("(" + response.responseText + ")");
var len = obj.data.length;//obj.data.length; "Table"这里的Table指的是后台返回 类似于data
if (obj.data == null || len == 0) {
return;
}

var checkboxgroup = Ext.getCmp("lblOperationBehavior");
for (var i = 0; i < len; i++) {
var checkbox = new Ext.form.Checkbox(
{
boxLabel: obj.data[i].OperationName,//obj.Table[i].Title; "Title"指的是返回的名字
name: obj.data[i].OperationCode,
inputValue: obj.data[i].OpeartionBehaviorId,
checked: false
});
checkboxgroup.items.add(checkbox);
}
OperationDefineForm.doLayout(); //重新调整版面布局
}
});
}

2.在修改页面窗体，加载所有CheckBox项，并选中相关项

2.1在修改页面窗体代码片段

{
xtype: 'panel',
width: 750,
border: false,
flex: 3,
items: [{
xtype: 'checkboxgroup',
id: 'lblOperationBehavior_Update',
name: 'lblOperationBehavior_Update',
columns: 4,
fieldLabel: '设定权限',
labelWidth: 100,
width: 750,
align: 'left',
border: true,
anchor: '100%', flex: 1,
listeners: {
render: function (view, opt) {
LoadingOperationBehavior_Update();
}
}
}]
},

2.2 LoadingOperationBehavior_Update();

//加载操作全部名称
//说明：LoadingOperationBehavior_Update中有两个Ajax请求；第一个是获取全部的CheckBox；第二个获取的是选中的CheckBox
function LoadingOperationBehavior_Update() {

Ext.Ajax.request({//第一个Ajax
url: '/ProjectWeb/HttpHandlerData/MemberManagement/MemberManagement.ashx?operation=SearchOperationBehavior',
params: {
start: start,
limit: limit,
page: '1'
},
success: function (response) {
var cbgObj = eval("(" + response.responseText + ")");
var cbgLen = cbgObj.data.length;//obj.data.length; "Table"这里的Table指的是后台返回 类似于data
if (cbgObj.data == null || cbgLen == 0) {
return;
}
var checkboxgroup = OperationDefineForm_Update.getForm().findField('lblOperationBehavior_Update');
var checkbox;
var strInIds = "";//定义临时变量，判断是否已经存在并选中
Ext.Ajax.request({//第二个Ajax
url: '/ProjectWeb/HttpHandlerData/MemberManagement/MemberManagement.ashx?operation=SearchOperationBehaviorTOP',
success: function (response) {
var obj = eval("(" + response.responseText + ")");
var len = obj.data.length;//obj.data.length; "Table"这里的Table指的是后台返回 类似于data
if (obj.data == null || len == 0) {
return;
}
for (var i = 0; i < cbgLen; i++) {
for (var j = 0; j < len; j++) {
if (cbgObj.data[i].OpeartionBehaviorId == obj.data[j].OpeartionBehaviorId) {//如果两个ID对比相等的话就是代表这个选项已呗选中
strInIds += cbgObj.data[i].OpeartionBehaviorId;
checkbox = new Ext.form.Checkbox(
{
boxLabel: obj.data[j].OperationName,//obj.Table[i].Title; "Title"指的是返回的名字
name: obj.data[j].OperationCode,
inputValue: obj.data[j].OpeartionBehaviorId,
checked: true
});
}
else {//不相等，不选
if (strInIds.indexOf(cbgObj.data[i].OpeartionBehaviorId) < 0) {
checkbox = new Ext.form.Checkbox(
{
boxLabel: cbgObj.data[i].OperationName,//obj.Table[i].Title; "Title"指的是返回的名字
name: cbgObj.data[i].OperationCode,
inputValue: cbgObj.data[i].OpeartionBehaviorId,
checked: false
});
}
}
}
checkboxgroup.items.add(checkbox);
}
OperationDefineForm_Update.doLayout(); //重新调整版面布局
}
});
}
});

}