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();
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值