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(); //重新调整版面布局  
                }
            });
        }
    });

}