淺談Extjs radiogroup change事件與items下的checked屬性

在使用Extjs制作crud時，由於添加和修改界面的高度相似，使用了相同的row字段。

在角色字段中使用了change監聽事件，用於動態的無效化權限分配字段，因為權限分配界面默認沒有隱藏，設定了checked:true屬性

var row_role = {layout:'column',items:[{columnWidth:.9,layout:'form',items:[{
        xtype:'radiogroup',    fieldLabel:'角色',
        items:[
            {id:'role1',    boxLabel:'管理員',         name:'userDto.user.roleCode',     inputValue:1},
            {id:'role2',    boxLabel:'操作員',         name:'userDto.user.roleCode',     inputValue:2,    checked: true},
            {id:'role3',    boxLabel:'計划發布員',     name:'userDto.user.roleCode',     inputValue:3},
            {id:'role4',    boxLabel:'客戶',         　name:'userDto.user.roleCode',     inputValue:4}
        ],
        listeners:{
            'change':function(group,checked){
                var fun = Ext.getCmp('fun_role');
                if(checked.inputValue == 2){
                    fun.enable();
                }else{
 fun.disable(); }
            }
        }
    }]}]};

    var row_funCode = {layout:'column',items:[{columnWidth:.9,layout:'form',items:[{
        xtype:'checkboxgroup',    fieldLabel:'權限分配',
        columns:4,                id:'fun_role',
        items:[
            {boxLabel:'免簽',            id:'userDto.user.funCode1'},
            {boxLabel:'訂房',            id:'userDto.user.funCode2'},
            {boxLabel:'訂車',            id:'userDto.user.funCode3'},
            {boxLabel:'訂餐',            id:'userDto.user.funCode4'},
            {boxLabel:'訂導游',            id:'userDto.user.funCode5'},
            {boxLabel:'訂門票',            id:'userDto.user.funCode6'},
            {boxLabel:'訂火車票',        id:'userDto.user.funCode7'},
            {boxLabel:'額外費用',        id:'userDto.user.funCode8'}
        ]
    }]}]};

經過測試，證明在添加界面中沒有任何問題，角色的切換和事件的處理都很正常。

但在處理修改數據時出現了問題。初步的看，業務邏輯完全沒有問題，但在業務展示是，應該無效化的字段依舊可以使用。

function inputUserData(selected,form){
        //聲明一個新的數據，將從數據源中獲取的數據放入其中
        var newRecord = {
            data:{
                //textfiled,下拉菜單的賦值方式
                'userDto.user.username'            :selected[0].get('username'),
                'userDto.user.nickname'            :selected[0].get('nickname'),
                'userDto.user.qq'                :selected[0].get('qq'),
                'userDto.user.company.itemCode'    :selected[0].get('companyCode'),
                'userDto.user.remark'            :selected[0].get('remark'),
            }
        }
        //根據獲取到的角色值和默認值比較
        switch(selected[0].get('roleCode')){
            //給相應的單選按鈕設置選中狀態
            case 1:    var role = Ext.getCmp('role1'); role.setValue(true);
                    //獲取權限分配對象,設置無效化
                    var fun = Ext.getCmp('fun_role');
                    fun.disable();
                break;
            case 2:    var role = Ext.getCmp('role2'); role.setValue(true);
                    var fun = Ext.getCmp('fun_role');
                    fun.enable();
                break;
            case 3:    var role = Ext.getCmp('role3'); role.setValue(true);
                    var fun = Ext.getCmp('fun_role');
                    fun.disable();
                break;
            case 4:    var role = Ext.getCmp('role4'); role.setValue(true);
                    var fun = Ext.getCmp('fun_role');
                    fun.disable();
                break;
        }
        //將新的數據刷新到form表單中
        form.getForm().loadRecord(newRecord);
    }                        

經過反復測試后，發現是角色中設置的checked屬性造成的，當該字段被隱藏后，執行了change事件

var fun = Ext.getCmp('fun_role'); fun.disable();

change事件監聽的checked是手動設置的{id:'role2', boxLabel:'操作員', name:'userDto.user.roleCode', inputValue:2, checked: true}的這條記錄

if(checked.inputValue == 2)

所有被無效化的字段，有重新因為change事件而被有效化。修改該問題時：建議將手動設置的checked屬性刪除即可