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")); }
相关推荐
保存提交代码,extjs4.0 // 重置 和 保存 按钮. buttons: [{ text: '重置', handler: function() { this.up('form').getForm().reset(); } }, { text: '保存', /*formBind: true, //only enabled once the ...
NULL 博文链接:https://fxiaozj.iteye.com/blog/1174901
Extjs4 表单从数据库读取数据映射到对应的字段中显示
通过多级的代码来获取组件当中表单元素值的一些技巧
ExtJS的表单使用FormPanel容器 表单使用的布局方式:form和formtable布局 ExtJS的表单和html的form标签是相似的,新建一个FormPanel实际上就是新建一个html的form标签,只是添加许多Ext的样式而已
代码如下: /** * 提交表单 */ function $postForm(a) { if (a.formPanel.getForm().isValid()) { var b = a.scope ? a.scope: this; a.formPanel.getForm().submit({ scope: b, url: a.url, method: “post”, ...
ExtJs中表单formPanel的横向布局
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
form表单提交后无法进入success函数的问题,很是常见,下面有个不错的解决方法,感兴趣的朋友可以参考下
ext form 提交表单介绍 个个属性的介绍 两个函数介绍
一、 Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用。 hideLabels:tru表示隐藏标签,默认为false。 ...
基于extjs form表单的项目源码
//表单验证 if (f.form.isValid) { f.form.submit({ waitTitle: “请稍候”, waitMsg: ‘正在登陆…’, url: ‘http://www.cnblogs.com/Service/SystemService/SystemService.ashx?Method=UserLogin’, method: ...
使用 ExtJS 的简单表单 要运行项目,只需打开 index.html!
Extjs表单验证包括空验证、用vtype格式进行简单的验证、高级自定义密码验证、使用正则表达式验证等等
this.formpanel = new Ext.FormPanel({ items: [{ fieldLabel: ‘代码’, name: ‘FCode’, anchor:’100%’, id: ‘fid’ },{ fieldLabel: ‘名称’, name: ‘FName’, anchor:’100%’ // anchor width by ...
form表单加载复杂json数据
本文接着上讲Extjs学习笔记之二 Extjs之Form介绍Extjs的表单。Extjs除了类似普通的html form的表单项之外,还有一些功能更为丰富实用的表单项。