Extjs-表单提交 表单验证 表单布局

1.表单提交
1.1ext默认提交形式

因为FormPanel是布局容器,没有提供submit()函数,所以要先获取它内部包含的BasicForm,才能提交这个示例中,后台接收数据的脚本是list.jsp,与以前方式相同,唯一的区别就是不再跳转,只需要返回一个JSON字符串提供操作是否成功,表单默认使用Ajax提交数据,Ajax可以回调,何况表单还封装了自己的处理方式,首先修改submit方法,让它支持更多的功能,ext.lib.Ajax中,判断究竟是调用了success还是failure的条件与业务无关,如果http响应成功就返回success,如果出现404或者500错误就执行failureform中的success和failure则是与业务相关的,只有后台响应true或者响应JSON中包含success:true时,才执行success(),failure()比较复杂,如果JSON中success不是true并且JSON中包含errors:{},那么业务错误;如果不包含errors:{}就认为是连接错误,当业务错误时,用this.failureType = Ext.form.Action.SERVER_INVALID(服务端验证表单错误时返回的错误类型)标记,可以通过action.failureType进行判断

代码
list.jsp

<%@ page language="java"  pageEncoding="UTF-8"%><%response.setContentType("text/json; charset=utf-8");request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");String name = request.getParameter("name");String id = request.getParameter("id");String foo = request.getParameter("foo");System.out.println(name);System.out.println(id);System.out.println(foo);if("123".equals(name)){response.getWriter().write("{success:true,msg:'成功'}");}else{response.getWriter().write("{success:false,msg:'失败'}");}%>

index.jsp

<script type="text/javascript">Ext.onReady(function(){var form = new Ext.form.FormPanel({title : 'form标题',width : 300,height : 100,buttonAlign : 'center',labelAlign : 'right',labelWidth : 80,frame : true,trackResetOnLoad : true,items : [new Ext.form.TextField({fieldLabel : '文本框',name : 'name',allowBlank : false})],buttons : [{text : '保存',handler : function(){var basicForm = form.getForm();//获取basicForm对象if(basicForm.isValid()){//如果客户端的验证通过则返回真basicForm.submit({url : 'list.jsp',method : 'post',waitTitle : "提示",//等待的标题waitMsg : '正在提交数据...',//等待的信息params : {id: 'tom',foo: 'bar'},//传递参数success : function(form,action){//使用JSON解析//var ch=Ext.util.JSON.decode(action.response.responseText);//var ch=action.response.responseText;//action.result提供了一个简易通道,省去先获取responseText再转化成JSON的麻烦//var ch=action.result.msg//alert(ch.msg);//这里的值为'成功'Ext.Msg.alert('信息',action.result.msg);},//404或者500错误就会执行failure : function(form,action){Ext.Msg.alert('错误',action.result.msg);}});}}},{text : '重置',handler : function(){var basicForm = form.getForm();//获取basicForm对象basicForm.reset();}}]});new Ext.Viewport({items: [form]});});</script>

1.2使用HTML原始的提交形式

ext默认提交形式不会进行页面跳转,主要考虑到one page one application(在同一个页面中实现整体应用)的形式,但是有的用户喜欢点击提交跳转到其他页面去,单击提交按钮页面就会刷新,变成list.jsp,这里要注意设置list.jsp页面response.setContentType("text/html; charset=utf-8")

代码
list.jsp

<%@ page language="java"  pageEncoding="UTF-8"%><%response.setContentType("text/html; charset=utf-8");request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");String name = request.getParameter("name");System.out.println(name);%>

index.jsp

<script type="text/javascript">Ext.onReady(function(){var form = new Ext.form.FormPanel({title : 'form标题',width : 300,height : 100,buttonAlign : 'center',labelAlign : 'right',labelWidth : 80,frame : true,trackResetOnLoad : true,items : [new Ext.form.TextField({fieldLabel : '文本框',name : 'name',allowBlank : false})],buttons : [{text : '保存',handler : function(){var basicForm = form.getForm();//获取basicForm对象if(basicForm.isValid()){//如果客户端的验证通过则返回真var element =basicForm.getEl();element.dom.action = 'list.jsp';element.dom.submit();}}},{text : '重置',handler : function(){var basicForm = form.getForm();//获取basicForm对象basicForm.reset();}}]});new Ext.Viewport({items: [form]});});</script>

1.3单纯Ajax

这里跳过自带的Ajax功能,使用单独的Ajax,表单自身的submit就使用了Ajax方式,使用外部Ajax,我们只要知道如何从中把字段的数据取出来,有以下几个方法form.getValues()函数,有一个参数,如果是true,返回JSON组装的字符串,如果是false,返回JSON对象findField()函数,可以获得表单的控件,我们现在有一个TextField,名称为text,我们可以通过下面获得控件var text = form.getForm.findField('text');

代码

list.jsp

<%@ page language="java"  pageEncoding="UTF-8"%>  <%         response.setContentType("text/json; charset=utf-8");      request.setCharacterEncoding("UTF-8");      response.setCharacterEncoding("UTF-8");      String name = request.getParameter("name");      System.out.println("name="+name);    if("lwc".equals(name)){          response.getWriter().write("{success:true,msg:'成功'}");      }else{          response.getWriter().write("{success:false,msg:'失败'}");      }  %>

index.jsp

<script type="text/javascript">Ext.onReady(function(){var form = new Ext.form.FormPanel({title : 'form标题',width : 300,height : 100,buttonAlign : 'center',labelAlign : 'right',labelWidth : 80,frame : true,trackResetOnLoad : true,items : [new Ext.form.TextField({fieldLabel : '文本框',name : 'name',allowBlank : false})],buttons : [{text : '保存',handler : function(){var text = form.getForm().findField('name');Ext.Ajax.request({////要访问的后台地址url : 'list.jsp',method : 'post',//params:{'name' : document.getElementById('name').value},//params:{'name' : text.getValue()},//序列化传入的form为编码后的url字符串params:Ext.Ajax.serializeForm(form.getForm().el.dom),success : function(response, options){//接收服务器的数据返回var c1 = response.responseText;//将JSON字符串解码（解析）成为对象,如果JSON是无效的，该函数抛出一个语法错误var c2 = Ext.util.JSON.decode(c1);Ext.Msg.alert('信息',c2.success+'-'+c2.msg);},//表示响应失败的回调函数//需要注意的是,这里返回的不是数据库或者业务之类的,而是HTTP返回404或者500错误failure : function(response){//接收服务器的数据返回var c1 = response.responseText;//将JSON字符串解码（解析）成为对象,如果JSON是无效的，该函数抛出一个语法错误var c2 = Ext.util.JSON.decode(c1);Ext.Msg.alert('信息',c2.success+'-'+c2.msg);}})}},{text : '重置',handler : function(){var basicForm = form.getForm();//获取basicForm对象basicForm.reset();}}]});new Ext.Viewport({items: [form]});});</script>

2.表单验证

如果要使用表单验证必须获得Ext.QuickTips.init()的支持

2.1借助vtype

ext提供了一套默认的效验方案,只需记住vtype的值,这些验证信息都定义在Ext.form.Vtypes中vtype : 'alpha' 只能输入英文字母,vtype : 'alphanum' 只能输入英文字符和数字vtype : 'email'只能输入电子邮件vtype : 'url'只能输入网址当然你也可以自己进行扩展,具体的方式参照Vtypes.js

代码

new Ext.form.TextField({fieldLabel : '邮箱',name : 'email',allowBlank : false,vtype : 'email'}

2.2 自定义效验规则

原理是:为regex设置一个正则表达式,然后进行效验时会调用regex.test(value),如果为true,就表示效验成功

new Ext.form.TextField({fieldLabel : '文本框',name : 'text',regex : /^[\u4E00-\u9FA5]+$/,regexText : '只能输入汉字'}

2.3使用后台的效验信息

为了配合后台效验,我们在submit的回调函数failure()做了点工作,通过action的failureType来判断响应失败是因为效验失败还是因为HTTP连接时的错误,从这里我们可以了解表单中的提交和普通Ajax的区别,普通Ajax的failure()回调函数只能在发生HTTP连接错误时执行,而表单的failure()回调函数可以处理包括连接错误和后台业务错误

list.jsp

<%@ page language="java"  pageEncoding="UTF-8"%><%response.setContentType("text/json; charset=utf-8");request.setCharacterEncoding("UTF-8");response.setCharacterEncoding("UTF-8");String password1 = request.getParameter("password1");String password2 = request.getParameter("password2");if(password1.equals(password2)){response.getWriter().write("{success:true,msg:'成功'}");}else{response.getWriter().write("{success:false,msg:'失败',errors:{password1:'密码不一样',password2:'密码不一样'}}");}%>

index.jsp

<%@ page language="java"  pageEncoding="UTF-8"%><%String rootpath = request.getContextPath();%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head><link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/><script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script><script type="text/javascript" src="<%=rootpath%>/ext/PagingMemoryProxy.js"></script><script type="text/javascript" defer>Ext.onReady(function(){Ext.QuickTips.init();Ext.form.Field.prototype.msgTarget = 'side';Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif';var form = new Ext.form.FormPanel({title : 'form标题',//头部的文本标题width : 300,height : 200,buttonAlign : 'center', labelAlign : 'right',labelWidth : 100,frame : true,trackResetOnLoad : true,items : [new Ext.form.TextField({fieldLabel : '请输入密码',name : 'password1',allowBlank : false}),{xtype : 'textfield',fieldLabel : '请再输次密码',name : 'password2',allowBlank : false}],buttons : [{text : '保存',handler : function(){var basicForm = form.getForm();//获取basicForm对象if(basicForm.isValid()){//如果客户端的验证通过则返回真basicForm.submit({url : 'list.jsp',method : 'post',waitTitle : "提示",//等待的标题waitMsg : '正在提交数据...',//等待的信息success : function(form,action){Ext.Msg.alert('信息',action.result.msg);},failure : function(form,action){if(action.failureType == Ext.form.Action.SERVER_INVALID){Ext.Msg.alert('错误','后台验证失败');}else{Ext.Msg.alert('错误','无法访问后台');}}});}}},{text : '重置',handler : function(){var basicForm = form.getForm();//获取basicForm对象basicForm.reset();}}]});new Ext.Viewport({items: [form]});});</script>  </head>  <body>  </body></html>

3.表单布局
3.1表单的默认布局是自上而下的

3.2平行布局

先使用layout : 'column'来说明是列布局然后使用items指定每列中使用的columnWidth指定每列所占总宽度的百分比如果使用列布局不可以在表单中直接使用defaultType指定默认的xtype了,否则影响布局效果每一列中也必须手动指定使用layout : 'form'这样才能在每列中正常显示输入框和对应标签layout : 'form'是formPanel默认使用的布局方式,自上而下

代码

var form = new Ext.form.FormPanel({title : 'form标题',width : 800,height : 400,buttonAlign : 'center',labelAlign : 'right',labelWidth : 80,frame : true,trackResetOnLoad : true,items : [{layout : 'column',items : [{columnWidth : .33,layout : 'form',items:[{xtype : 'textfield',fieldLabel : '两个字'}]},{columnWidth : .33,layout : 'form',items : [{xtype : 'textfield',fieldLabel : '三个字'}]},{columnWidth : .33,layout : 'form',items : [{xtype : 'textfield',fieldLabel : '四个字'}]}]}]});new Ext.Viewport({items: [form]});

3.3自定义布局

如何给表单添加不属于Ext.form.Field子类的控件,比如图片和文字之类的静态文字我们使用xtype : 'panel'

代码

items : [{fieldLabel : '姓名'},{fieldLabel : '年龄'},{xtypt : 'panel',html : '<center><img src="lwc.jpg"/></center>'}]