最近项目中需要通过单选按钮,控制表单显示内容,用到了radio的check事件来控制表单组件的显示和隐藏。代码如下:
function checkAssign(){
var store = new Ext.data.JsonStore({fields:[{name:'ufcitycode'},{name:'ufcityname'}],
url:'cssp/bssorder/exceptionOrderAction.do?method=getAssignCitys',
autoLoad:true
});
var cityComboBox = new Ext.form.ComboBox({
fieldLabel:'派发地市',
id:'city',
width:240,
xtype:'combo',
store:store,
valueField:'ufcitycode',
displayField:'ufcityname',
triggerAction : "all",
editable:false,
mode : 'local',
lazyRender : true
});
var resonArea = new Ext.form.TextArea({
fieldLabel:'退单原因',
id:'resonArea',
type:'textarea',
grow:true,
width:270
});
var checkRadio = new Ext.form.RadioGroup ({
columns :2,
fieldLabel :"审核状态",
items: [
{xtype:'radio',name:"checkState",boxLabel :"审核派发",inputType :'radio',inputValue :'1',checked :true,
listeners:{
'check':function(checkbox,checked){
alert(checked);
if(checked){
Ext.getCmp('p_remark').hide();
Ext.getCmp('p_cityComboBox').show();
}else{
Ext.getCmp('p_remark').show();
Ext.getCmp('p_cityComboBox').hide();
}
}
}
},
{xtype:'radio',name:"checkState",boxLabel :"退单",inputType :'radio',inputValue :'2'}]
});
var saveButton = new Ext.Button({
text:'保存',
handler:function(){
var reason = remark.getValue(); //退单原因
var state = checkRadio.getValue().inputValue;
var ids = new Array();
var records = grid.getSelectionModel().getSelections();
for(var i=0;i<records.length;i++){
ids.push("'"+records[i].get('service_order_id')+"'");
}
var ufids = ids.toString();
if(state == '1'){//审核派发
if(ufids != null){
Ext.getCmp('checkForm').getForm().submit({
url : 'cssp/bssorder/exceptionOrderAction.do?method=assignExceptionOrder&ufid=' + ufids,
waitMsg : '正在更新...',
waitTitle : '等待',
method:'POST',
timeout:36000000,
successProperty:'success',
success: function(fp, o){
alert('操作成功!');
grid.store.reload();
checkWin.close();
},
failure: function (fp, o){
alert('操作失败,请检查数据的合法性!');
}
})
}else{
Ext.msg.alert('提示','请选择派发地市');
}
}else{//退单
Ext.getCmp('checkForm').getForm().submit({
url : 'cssp/bssorder/workOrderAction.do?method=checkOrder&ufid='+ufids,
waitMsg : '正在更新...',
waitTitle : '等待',
method:'POST',
timeout:36000000,
successProperty:'success',
success: function(fp, o){
alert('退单成功!');
grid.store.reload();
checkWin.close();
},
failure: function (fp, o){
alert('操作失败,请检查数据的合法性!');
}
})
}
}
});
var closeButton = new Ext.Button({
text:'关闭',
handler:function(){
checkWin.close(); //必须把window关掉,不能用hide,用hide会导致组件的显示和隐藏有问题
}
});
var remark = new Ext.form.TextArea({
xtype:'textarea',
name:'check_remark',
fieldLabel:'备注',
width:272,
height:80
});
var form = new Ext.form.FormPanel({
region:'center',
xtype:'form',
id:'checkForm',
frame:true,
layout:'form',
labelWidth:60,
labelAlign:'right',
items:[checkRadio,{layout : 'form',id:'p_cityComboBox',items:[cityComboBox]},{layout : 'form',id:'p_remark',items:[remark]}] //每个item加一个id,直接通过组件的id来隐藏的话,会隐藏的不全,导致组件名还有显示。
});
Ext.getCmp('p_remark').hide(); //第一次打开时需要把这个组件隐藏掉。
//审核窗口
var checkWin = new Ext.Window({
title:'工单审核',
modal :true,
width:400,
closable:true,
bodyStyle:"padding:15px 15px 15px 15px",
autoScroll:false,
items:[form],
buttons:[saveButton,closeButton]
});
checkWin.show();
}