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.2LoadingOperationBehavior_Update();

//加载操作全部名称//说明：LoadingOperationBehavior_Update中有两个Ajax请求；第一个是获取全部的CheckBox；第二个获取的是选中的CheckBoxfunction 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(); //重新调整版面布局                  }            });        }    });}