Extjs的Form表单提交方式
一.直接提交:url写在表单中
class="js">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")); }
?
?