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中.
3291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
