Extjs的Form表单提交方式
一.直接提交：url写在表单中
var addForm = new Ext.FormPanel({
frame: true,
url:"insertProject.eva?doType=insertProject",
labelWidth: 80,
//labelAlign: "right",
//buttonAlign:"center",
items:[
xmmcCombox,
{
name:"xmdw",
xtype:"textfield",
fieldLabel:"项目单位",
readOnly:true,
width:200
},{
name:"depart",
xtype:"textfield",
fieldLabel:"主管部门",
readOnly:true,
width:200
},
typeRadio,
modeRadio,
agencyRadio
],
buttons:[
{
text:"确认",
handler:function(){
addForm.getForm().submit({
method:"POST",
waitMsg:"保存中，请稍后..."
});
addWin.hide();
}
},{
text:"取消",
handler:function(){
addWin.hide();
}
}
]
});
二.在submit()方法中获取参数值，设置URL，并提交
var addForm = new Ext.FormPanel({
frame: true,
labelWidth: 80,
//labelAlign: "right",
//buttonAlign:"center",
items:[
xmmcCombox,
{
name:"xmdw",
xtype:"textfield",
fieldLabel:"项目单位",
readOnly:true,
width:200
},{
name:"depart",
xtype:"textfield",
fieldLabel:"主管部门",
readOnly:true,
width:200
},
typeRadio,
modeRadio,
agencyRadio
],
buttons:[
{
text:"确认",
handler:function(){
var thisForm = addForm.getForm();
if(thisForm.isValid()){
var submitValues = thisForm.getValues();
//提交表单
thisForm.submit({
url:"insertProject.eva?doType=insertProject",
method:"POST",
waitMsg:"保存中，请稍后...",
params:submitValues,
success:function(){
Ext.Msg.alert('成功', "增加了一个新的项目绩效信息！");
addWin.hide();
},
failure:function(form,action){
Ext.Msg.alert('失败', "保存项目绩效信息失败！");
}
});
}
addWin.hide();
}
},{
text:"取消",
handler:function(){
addWin.hide();
}
}
]
});
注意查看url的位置区别！
实例分析：
1.ExtJs前端代码提交表单：
/**
* -----------------------------------------
* ======点击下拉按钮获取项目名称，项目单位，主管部门======
* -----------------------------------------
*/
/*-----1.创建数据源-----*/
var xmmcStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url:'getXmmc.eva?doType=getXmmc'
}),
reader: new Ext.data.JsonReader(
{root: 'data'},
['id','name']
)
});
/*-----2.创建项目名称下拉列表-----*/
var xmmcCombox = new Ext.form.ComboBox({
fieldLabel:"项目名称",
store:xmmcStore,
displayField:"name",
valueField:"id",
hiddenName:"projectId",
triggerAction:"all",
emptyText:"请选择",
editable:false,
listeners:{
/*"expand":function(){
xmmcStore.load();
},*/
"select":function(obj, record){
itemStore.baseParams.xmid = record.get('id');
itemStore.load();
}
}
});
/*-----3.创建获取单位和主管部门数据源-----*/
var itemProxy = new Ext.data.HttpProxy({
url:"getItem.eva?doType=getItem"
});
var itemReader = new Ext.data.JsonReader(
{root:"data"},
["company","department"]
);
var itemStore = new Ext.data.Store({
proxy:itemProxy,
reader:itemReader
});
//加载Store，并将数据赋值到文本框
itemStore.on('load', function (store, record, options) {
var comp = record[0].get("company");
var dept = record[0].data.department;
addForm.getForm().findField("xmdw").setValue(comp);
addForm.getForm().findField("depart").setValue(dept);
});
/**
* --------------------
* ======增加项目窗口======
* --------------------
*/
/*-----1.创建单选框按钮组-----*/
//评价类型单选框
var typeRadio = new Ext.form.RadioGroup({
fieldLabel:"评价类型",
items:[{
layout: 'column',
items: [
{
name:"etype",
inputValue:"1",
boxLabel:"事前评价",
checked:true,
width:100
},{
name:"etype",
inputValue:"2",
boxLabel:"事中评价",
width:100
},{
name:"etype",
inputValue:"3",
boxLabel:"事后评价",
width:100
}
]
}]
});
//评价方式单选框
var modeRadio = new Ext.form.RadioGroup({
fieldLabel:"评价方式",
items:[{
layout:"column",
items:[
{
name:"emode",
inputValue:"1",
boxLabel:"单位绩效自评",
checked:true,
width:100
},{
name:"emode",
inputValue:"2",
boxLabel:"财政部门组织评价",
width:100
}
]
}]
});
//评价机构单选框
var agencyRadio = new Ext.form.RadioGroup({
fieldLabel:"评价机构",
items:[{
layout:"column",
items:[
{
name:"eagency",
inputValue:"1",
boxLabel:"中介机构",
checked:true,
width:100
},{
name:"eagency",
inputValue:"2",
boxLabel:"单位评价组",
width:100
},{
name:"eagency",
inputValue:"3",
boxLabel:"财政评价组",
width:100
}
]
}]
});
/*-----2.创建表单-----*/
var addForm = new Ext.FormPanel({
frame: true,
labelWidth: 80,
//labelAlign: "right",
//buttonAlign:"center",
items:[
xmmcCombox,
{
name:"xmdw",
xtype:"textfield",
fieldLabel:"项目单位",
readOnly:true,
width:200
},{
name:"depart",
xtype:"textfield",
fieldLabel:"主管部门",
readOnly:true,
width:200
},
typeRadio,
modeRadio,
agencyRadio
],
buttons:[
{
text:"确认",
handler:function(){
var thisForm = addForm.getForm();
if(thisForm.isValid()){
var submitValues = thisForm.getValues();
//提交表单
thisForm.submit({
url:"insertProject.eva?doType=insertProject",
method:"POST",
waitMsg:"保存中，请稍后...",
params:submitValues,
success:function(){
Ext.Msg.alert('成功', "增加了一个新的项目绩效信息！");
addWin.hide();
},
failure:function(form,action){
Ext.Msg.alert('失败', "保存项目绩效信息失败！");
}
});
}
addWin.hide();
}
},{
text:"取消",
handler:function(){
addWin.hide();
}
}
]
});
/*-----3.创建窗口-----*/
var addWin = new Ext.Window({
title:"增加任务",
layout:"fit",
height:280,
closeAction:"hide",
width:350,
items:addForm
});
需要注意的参数名：
1.ComboBox：hiddenName:"projectId"---valueField:"id"
2.Textfield：name---value(store赋值的value)
3.Radio：name---inputValue
2.Java后台代码获取提交的表单数据：
else if ("insertProject".equals(action)) {
int projectId = Integer.valueOf(request.getParameter("projectId"));
String company = request.getParameter("xmdw");
String department = request.getParameter("depart");
int etype = Integer.valueOf(request.getParameter("etype"));
int emode = Integer.valueOf(request.getParameter("emode"));
int eagency = Integer.valueOf(request.getParameter("eagency"));
}