extjs FormPanel更改为普通表单提交,提交到iframe显示

BasicForm提交源代码:

* @return {BasicForm} this */ submit : function(options){ options = options || {}; if(this.standardSubmit){ var v = options.clientValidation === false || this.isValid(); if(v){ var el = this.el.dom; if(this.url && Ext.isEmpty(el.action)){ el.action = this.url; } el.submit(); } return v; } var submitAction = String.format('{0}submit', this.api ? 'direct' : ''); this.doAction(submitAction, options); return this; },

由这句话可以知道,我们的提交实际是Dom元素中的form提交的,那么应该如何设置为普通的提交,而且设置为提交到iframe中显示呢?

下面将贴出所有的源代码:

我的FormPanel的源代码:

/** * 医院门诊住院费用统计FormPanel */ OutpatientForm=Ext.extend(Ext.form.FormPanel,{ yearCbo:null,//年度CBO statisticArray:[],//统计时间数组 dateStatisticsCbo:null,//时间统计类型cbo statisticTimeCbo:null,//统计时间 statisticModeCbo:null,//统计方式Cbo exportModeCbo:null,//导出方式 leftGridPanel:null,//左边的grid panel rightGridPanel:null,//右边的grid panel constructor:function(){//构造方法 //step one this.initYearCbo();//初始化年度CBO 你懂得 //step two this.initDateStatistic();//初始化时间统计类型 //step three this.initStatisticArray();//初始化Store中的参数 //step four this.initStatisticTimeCbo();//初始化统计时间Combobox //step five this.initStatisticModeCbo();//初始化统计方式Cbo // OutpatientForm.superclass.constructor.call(this,{ region:"north", collapsible:true,//是否可以折叠 id:'topForm', title:"医院接诊统计查询条件", url:'/his/outpatient_accepts!list.action', standardSubmit:true, collapsedTitle:true, // 折叠时候是否显示title height:60, layout:'column', split:true,//是否可以缩放 border:true, bodyStyle:'padding-top:6px;padding-left:5px;', //---- items:[{//---i begin xtype : "panel", layout : "column", border : false, items:[ {xtype:"textfield",hidden:true,name:"officecode",id:"officecode"}, { xtype:"panel", layout:'form', border:false, width:130, labelWidth:40, items:[this.yearCbo] }, { xtype:"panel", layout:'form', border:false, width:200, labelWidth:80, items:[this.dateStatisticsCbo] }, { xtype:"panel", layout:'form', border:false, hidden:true, id:"panel_startDate",//隐藏panel不让其占位置 width:180, labelWidth:40, items:[{xtype:"datefield",fieldLabel:"日期",editable:false,name:"startDate",id:"startDate",format:'Y-m-d',width:120,hidden:true}] }, { xtype:"panel", layout:'form', id:"panel_endDate", hidden:true,//隐藏panel不让其占位置 border:false, width:160, labelWidth:20, items:[{xtype:"datefield",fieldLabel:"至",editable:false,name:"endDate",id:"endDate",format:'Y-m-d',width:120,hidden:true}] }, { xtype:"panel", id:'statisticTime_panel', layout:'form', border:false, width:180, labelWidth:60, items:[this.statisticTimeCbo] }, { xtype:"panel", layout:'form', border:false, width:180, labelWidth:60, items:[this.statisticModeCbo] }, { xtype:"panel", layout:'form', border:false, width:80, labelWidth:60, items:[{xtype:'button',text:'统计计算',hideLabel:true,id:'calcubtn'}] } ] }]//--i end //--- }); }, //---初始化年度Combobox initYearCbo:function(){ var store= new Ext.data.JsonStore({ autoLoad:true, idProperty:'value', url:'/his/clinic_cost_statistics!ajaxGetAnnual.action', fields:[{name:"value"},{name:'year'},{name:'selected'}], listeners:{ load:this.setYearCboDefault, scope:this } }); // this.yearCbo=new Ext.form.ComboBox({ fieldLabel:"年 度", triggerAction:'all', displayField:'year', editable:true, valueField:'value', name:'dbyear', id:'dbyear', store:store, width:60, listeners:{ select:this.onYearCboSelect, scope:this } }); }, //--年度CBO设置默认值事件 setYearCboDefault:function(){ var store=this.yearCbo.getStore(); //移除 [全部]这个选项 store.removeAt(0); for(var i=0;i<store.getCount();i++){ var r=store.getAt(i).data; if((r.selected)){ this.yearCbo.setValue(r.value); break; } } }, //---初始化实践统计类型CBO initDateStatistic:function(){ //时间统计类型simpleStore var store=new Ext.data.SimpleStore({ fields:['value','text'], data:[['3','按年统计'],['2','按季统计'],['1','按月统计'],['4','按日统计']] }); //初始化时间统计类型 this.dateStatisticsCbo=new Ext.form.ComboBox({ fieldLabel:"时间统计类型", triggerAction:'all', displayField:'text', editable:true, valueField:'value', name:'tjlx', id:'tjlx', store:store, width:100, value:'3', mode:'local', listeners:{ select:this.onDateStatisticTypeSelect, scope:this } }); }, //--初始化统计时间CBO initStatisticTimeCbo:function(){ var store=new Ext.data.ArrayStore({ fields:['key','value'], data:[['0','本年度']] }); this.statisticTimeCbo=new Ext.form.ComboBox({ fieldLabel:"统计时间", triggerAction:'all', displayField:'value', editable:true, valueField:'key', name:'exaTimeType', id:'exaTimeType', store:store, width:80, value:'0', mode:'local' }); }, //初始化统计时间类型Store initStatisticArray:function(){ this.statisticArray[3]=[{key:'0',value:'本年度'}]; this.statisticArray[2]=[{key:'0',value:"全部"}, {key:'1',value:"第一季度"}, {key:'2',value:"第二季度"}, {key:'3',value:"第三季度"}, {key:'4',value:"第四季度"} ]; this.statisticArray[1]=[{key:'0',value:'全部'}, {key:'1',value:'一月'}, {key:'2',value:'二月'}, {key:'3',value:'三月'}, {key:'4',value:'四月'}, {key:'5',value:'五月'}, {key:'6',value:'六月'}, {key:'7',value:'七月'}, {key:'8',value:'八月'}, {key:'9',value:'九月'}, {key:'10',value:'十月'}, {key:'11',value:'十一月'}, {key:'12',value:'十二月'} ]; }, //--初始化统计方式Combobox initStatisticModeCbo:function(){ var store=new Ext.data.SimpleStore({ fields:['value','text'], data:[['0','按医院统计'],["1","按科室统计"]] }); this.statisticModeCbo=new Ext.form.ComboBox({ fieldLabel:"统计方式", triggerAction:'all', displayField:'text', editable:true, valueField:'value', name:'tjdx', id:'tjdx', store:store, width:100, value:'0', mode:'local' }); }, //---年度的选择改变的时候 onYearCboSelect:function(combo,record,index){ newValue=parseInt(this.yearCbo.getValue()); //时间统计类型 var choice=parseInt(this.dateStatisticsCbo.getValue()); //判断是否按日统计 if(choice==4){ // 设定日期的值 var startDate=Ext.getCmp('startDate'); var endDate=Ext.getCmp('endDate'); if(startDate.getValue()!=''){ var d=startDate.getValue(); d.setYear(newValue); startDate.setValue(d); } if(endDate.getValue()!=''){ var d=endDate.getValue(); d.setYear(newValue); endDate.setValue(d); } } }, //---时间统计类型Cbo更改的时候 onDateStatisticTypeSelect:function(combo,record,index){ var startDate=Ext.getCmp('startDate'); var endDate=Ext.getCmp('endDate'); //得到时间统计类型值 var newValue=parseInt(this.dateStatisticsCbo.getValue()); //获得时间统计类型对象 var st=Ext.getCmp('statisticTime_panel'); //combobox显示的默认值 var cboDefaultValue; switch(newValue){ case 4://按日统计 this.enableDate();//设置日期可用 //设置统计时间不显示 st.setVisible(false); //设定默认值 cboDefaultValue='0'; break; case 3://按月统计 //设定默认值 cboDefaultValue='0'; break; case 2://按季统计 //设定默认值 cboDefaultValue='0'; break; case 1://按年统计 cboDefaultValue='0'; break; } //如果不是按日统计那么需要隐藏日期控件 if(newValue!=4){ //设置统计时间显示 st.setVisible(true); this.unableDate();//设置日期不可用 //不是日期才需要填充 //清空和填充store this.fillDateStatisticTypeStore(newValue,cboDefaultValue); } }, //---设置日期组件可用 enableDate:function(){ var startDate=Ext.getCmp('startDate'); var endDate=Ext.getCmp('endDate'); //设置日期控件显示 startDate.setVisible(true); endDate.setVisible(true); //将disable设置为可用 ///startDate.setDisabled(false); //endDate.setDisabled(false); //设定日期控件默认值 var d=new Date(); //获得年度Combobox的值 var year=parseInt(this.yearCbo.getValue()); if(year!=0){//非0即真 d.setYear(year); } startDate.setValue(d); endDate.setValue(d); //显示panel Ext.getCmp('panel_startDate').setVisible(true); Ext.getCmp('panel_endDate').setVisible(true); }, //---设置日期组件不可用 unableDate:function(){ var startDate=Ext.getCmp('startDate'); var endDate=Ext.getCmp('endDate'); //设置日期不可用 startDate.setVisible(false); endDate.setVisible(false); //隐藏panel Ext.getCmp('panel_startDate').setVisible(false); Ext.getCmp('panel_endDate').setVisible(false); }, //---清空原有store中的信息 //@param newValue是时间统计类型选择项值 //@param cboDefaultValue combobox默认值 fillDateStatisticTypeStore:function(newValue,cboDefaultValue){ //定义一个Record模型 var MyRecord = Ext.data.Record.create([{name:"key"},{name:"value"} ]); var store=this.statisticTimeCbo.getStore(); //清空原有的所有元素 store.removeAll(); //添加对应元素 //添加对应的统计时间 for(var i=0;i<this.statisticArray[newValue].length;i++ ){ //得到对应的值 store.add(new MyRecord(this.statisticArray[newValue][i])); } //设置默认值 this.statisticTimeCbo.setValue(cboDefaultValue); }, //查询信息 query:function(){ var v=Ext.getCmp('topForm'); v.getForm().getEl().dom.target='mfrm'; alert(v.getForm().getEl().dom.target); v.getForm().submit(); return; //显示和隐藏科室列 var tjdx=Ext.getCmp('tjdx').getValue(); if(parseInt(tjdx)==1){ Ext.getCmp('basicgrid').getColumnModel().setHidden(1,false); }else{ Ext.getCmp('basicgrid').getColumnModel().setHidden(1,true); } // var v=Ext.getCmp('topForm'); if(!v.validationFormData()){ return; } //get basic grid var collectGrid=Ext.getCmp('basicgrid'); //加载之前赋值参数 collectGrid.store.on('beforeload', function(store) { this.leftGridPanel=Ext.getCmp('leftGrid'); var orgCodes=this.leftGridPanel.getSelectOrgCodes(); //alert(orgCodes); var dbyear = Ext.getCmp('dbyear').getValue(); var startDate=Ext.getCmp("startDate"); var endDate=Ext.getCmp("endDate"); var tjlx=Ext.getCmp("tjlx").getValue(); var tjdx=Ext.getCmp("tjdx").getValue(); var s=startDate.getValue()!=''?startDate.getValue().format('Y-m-d'):''; var e=endDate.getValue()!=''?endDate.getValue().format('Y-m-d'):''; var officeCode=Ext.getCmp("officecode").getValue(); var tjlx=Ext.getCmp("tjlx").getValue(); var exaTimeType=Ext.getCmp("exaTimeType").getValue(); collectGrid.store.baseParams = { 'outpatientVo.orgCodes' :orgCodes, 'outpatientVo.startDate' : s, 'outpatientVo.endDate' : e, 'outpatientVo.dbyear' : dbyear, 'outpatientVo.tjlx':tjlx, 'outpatientVo.tjdx':tjdx, 'outpatientVo.officeCode':officeCode, 'outpatientVo.exaTimeType':exaTimeType }; // parent.Ext.getBody().mask("数据提取中.请稍等...","x-mask-loading"); }); //开始加载 collectGrid.store.load({ params:{ start : 0, limit : 20 }, callback : function(records, options, success) { if (!success) { Ext.MessageBox.show({ title : '信息！', msg : '加载失败！', msg : '系统运行出错，请联系管理员！', buttons : Ext.MessageBox.OK, fn:function(btn, text){ if (btn == 'ok'||btn == 'cance'){ Ext.getBody().unmask(); parent.Ext.getBody().unmask(); top.Ext.getBody().unmask(); } }, icon : Ext.MessageBox.ERROR }); } } }); //加载完显示 // store.on('load', function(store) { // parent.Ext.getBody().unmask(); // }); }, //bing event bindClick:function(){ Ext.getCmp('calcubtn').on('click',this.query); }, //the data in the form of validate method validationFormData:function(){ this.leftGridPanel=Ext.getCmp('leftGrid'); var orgCodes=this.leftGridPanel.getSelectOrgCodes(); //alert(orgCodes); var dbyear = Ext.getCmp('dbyear').getValue(); var startDate=Ext.getCmp("startDate"); var endDate=Ext.getCmp("endDate"); var tjlx=Ext.getCmp("tjlx").getValue(); //alert(dbyear); //alert(startDate); //alert(endDate); // alert(tjlx); if(orgCodes=="") { parent.Ext.MessageBox.show({ title : '提示！', msg : '请至少选择一个医疗服务单位！', width : 300, buttons : Ext.MessageBox.OK, icon : Ext.MessageBox.INFO }); return false; } if(tjlx=="4") { if(startDate.getValue()==''){ var s = dbyear+"-01-01"; startDate.setValue(s); } if(endDate.getValue()==''){ var e = dbyear+"-12-31"; endDate.setValue(e); } if(startDate.getValue().indexOf(dbyear)==-1||endDate.getValue().indexOf(dbyear)==-1) { parent.Ext.MessageBox.show({ title : '提示！', msg : "所选日期应该在"+dbyear+"年度里", width : 300, buttons : Ext.MessageBox.OK, icon : Ext.MessageBox.INFO }); return false ; } if(startDate.getValue().getTime()>endDate.getValue().getTime()) { parent.Ext.MessageBox.show({ title : '提示！', msg : "查询的开始结束天数前后不对", width : 300, buttons : Ext.MessageBox.OK, icon : Ext.MessageBox.INFO }); return false ; } } return true; } });
query这个方法是提交的方法:

在query方法中的return之上的代码,仅仅只是用来测试是否能实现,普通的表单提交,以及提交到我想要的iframe中显示数据;

下面解释一下关键的几个属性的设置:

var v=Ext.getCmp('topForm');//得到Formpanel对象 v.getForm().getEl().dom.target='mfrm';//由最上面的BasicForm的提交的方法得知,其实提交本身是HTML中的form元素提交,那么我们只 //需要改变form的target将可以提交到对应的iframe中,"getForm()"返回的是FormBasic对象,getEl()返回的是Element //对象,.dom返回的是dom元素(也就是HTML元素的form元素)  alert(v.getForm().getEl().dom.target);//将上面设置的target显示,是否设置成功 v.getForm().submit();//调用BasicForm提交
现在还只是设置了target,还没有设置为普通的提交,那么此时需要设置的属性是:standardSubmit

文档:

standardSubmit : Boolean

If set to true, standard HTML form submits are used insteadof XHR (Ajax) style form submissions. Defaults to false.

Note: When using standardSubmit, theoptions to submit are ignored becauseExt's Ajax infrastracture is bypassed. To pass extra parameters (e.g.baseParams and params), utilize hidden fieldsto submit extra data, for example:

new Ext.FormPanel({
    standardSubmit: true,
    baseParams: {
        foo: 'bar'
    },
    url: 'myProcess.php',
    items: [{
        xtype: 'textfield',
        name: 'userName'
    }],
    buttons: [{
        text: 'Save',
        handler: function(){
            var fp = this.ownerCt.ownerCt,
                form = fp.getForm();
            if (form.isValid()) {
                // check if there are baseParams and if // hiddent items have been added already
                if (fp.baseParams && !fp.paramsAdded) {
                    // add hidden items for all baseParams
                    for (i in fp.baseParams) {
                        fp.add({
                            xtype: 'hidden',
                            name: i,
                            value: fp.baseParams[i]
                        });
                    }
                    fp.doLayout();
                    // set a custom flag to prevent re-adding
                    fp.paramsAdded = true;
                }
                form.submit();
            }
        }
    }]
});

standardSubmit设置为true,HTML标准提交将代替Ajax提交,默认值false;

如果这些你全部都设置过并且你的FormPanel有url属性,那么你在提交将会是普通的form提交,也可以提交到对应的iframe中.