extjs通过单选按钮动态创建form表单

最近项目中需要通过单选按钮，控制表单显示内容，用到了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();

}