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

}