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