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中.