extjs FormPanel更改为普通表单提交,提交到iframe显示
来源：互联网 发布：mac能用的wow插件 编辑：程序博客网 时间：2024/06/05 16:38
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,//年度CBOstatisticArray:[],//统计时间数组dateStatisticsCbo:null,//时间统计类型cbostatisticTimeCbo:null,//统计时间statisticModeCbo:null,//统计方式CboexportModeCbo:null,//导出方式leftGridPanel:null,//左边的grid panelrightGridPanel:null,//右边的grid panelconstructor: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 //---});},//---初始化年度ComboboxinitYearCbo: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;}}},//---初始化实践统计类型CBOinitDateStatistic: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 } }); },//--初始化统计时间CBOinitStatisticTimeCbo: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' }); },//初始化统计时间类型StoreinitStatisticArray: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:'十二月'} ];},//--初始化统计方式ComboboxinitStatisticModeCbo: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();//设置日期不可用//不是日期才需要填充//清空和填充storethis.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);//显示panelExt.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);//隐藏panelExt.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 eventbindClick:function(){Ext.getCmp('calcubtn').on('click',this.query);},//the data in the form of validate methodvalidationFormData: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 tofalse.
Note: When using standardSubmit, theoptions tosubmit are ignored becauseExt's Ajax infrastracture is bypassed. To pass extra parameters (e.g.baseParams andparams), 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中.
- extjs FormPanel更改为普通表单提交,提交到iframe显示
- extjs表单FormPanel提交数据和加载数据
- ExtJs formPanel(二、表单提交和取值)
- extjs表单FormPanel提交数据和加载数据
- extjs以普通方式提交表单
- 1个iframe提交表单到另一个iframe,在另一个iframe中显示
- Ext.form.FormPanel表单提交
- extjs设置表单元素为disable后表单无法提交参数到后台的问题
- Extjs初始化/提交Ext.form.FormPanel，表单中包含textfield,textarea,radio,checkbox,combo等
- ExtJS 表单提交示例
- Extjs 表单提交
- Extjs简单提交表单
- 用普通的form表单提交数据到后台显示乱码
- extjs设置为disable后表单无法提交参数到后台的问题
- ExtJS中FormPanel设置FileUpload为true后，提交返回下载文件的解决
- JQuery异步提交表单、HTML提交表单到新窗口或IFrame
- 页面不刷新，表单提交到弹出窗口或Iframe
- php ajax提交普通表单
- Maven对Web的支持
- 判断互联网产品价值的FOR模型
- 内存分配方式
- Web.Config中节点的解释
- EFM32片内外设--MSC Device information
- extjs FormPanel更改为普通表单提交,提交到iframe显示
- Android 禁止屏幕休眠和锁屏的方法 .
- Eclipse及其插件下载网址大全
- Van Jacobson's network channels
- SQLite 数据类型
- 加载VCS双机软件的正式License
- iPhone中如何进行多线程编程和线程锁
- 接口与类
- war文件
