浅谈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属性删除即可