Extjs-表单提交 表单验证 表单布局
1.表单提交
1.1ext默认提交形式




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



[javascript] view plaincopy
01.<%@ page language="java"  pageEncoding="UTF-8"%> 
02.<%    
03.    response.setContentType("text/json; charset=utf-8"); 
04.    request.setCharacterEncoding("UTF-8"); 
05.    response.setCharacterEncoding("UTF-8"); 
06.    String name = request.getParameter("name"); 
07.    String id = request.getParameter("id"); 
08.    String foo = request.getParameter("foo"); 
09.    System.out.println(name); 
10.    System.out.println(id); 
11.    System.out.println(foo); 
12.    if("123".equals(name)){ 
13.        response.getWriter().write("{success:true,msg:'成功'}"); 
14.    }else{ 
15.        response.getWriter().write("{success:false,msg:'失败'}"); 
16.    } 
17.%> 

index.jsp




[javascript] view plaincopy
01.<script type="text/javascript"> 
02.    Ext.onReady(function(){ 
03.        var form = new Ext.form.FormPanel({ 
04.            title : 'form标题', 
05.            width : 300, 
06.            height : 100, 
07.            buttonAlign : 'center', 
08.            labelAlign : 'right', 
09.            labelWidth : 80, 
10.            frame : true, 
11.            trackResetOnLoad : true, 
12.            items : [new Ext.form.TextField({ 
13.                fieldLabel : '文本框', 
14.                name : 'name', 
15.                allowBlank : false 
16.            })], 
17.            buttons : [{ 
18.                text : '保存', 
19.                handler : function(){ 
20. &n