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.                    var basicForm = form.getForm();//获取basicForm对象 
21.                    if(basicForm.isValid()){//如果客户端的验证通过则返回真 
22.                        basicForm.submit({ 
23.                            url : 'list.jsp', 
24.                            method : 'post', 
25.                            waitTitle : "提示",//等待的标题 
26.                            waitMsg : '正在提交数据...',//等待的信息 
27.                            params : {id: 'tom',foo: 'bar'},//传递参数 
28.                            success : function(form,action){ 
29.                                //使用JSON解析 
30.                                //var ch=Ext.util.JSON.decode(action.response.responseText); 
31.                                //var ch=action.response.responseText; 
32.                                //action.result提供了一个简易通道,省去先获取responseText再转化成JSON的麻烦 
33.                                //var ch=action.result.msg 
34.                                //alert(ch.msg);//这里的值为'成功' 
35.                                Ext.Msg.alert('信息',action.result.msg); 
36.                            }, 
37.                            //404或者500错误就会执行 
38.                            failure : function(form,action){ 
39.                                Ext.Msg.alert('错误',action.result.msg); 
40.                            } 
41.                        }); 
42.                    } 
43.                } 
44.            },{ 
45.                text : '重置', 
46.                handler : function(){ 
47.                    var basicForm = form.getForm();//获取basicForm对象 
48.                    basicForm.reset(); 
49.                } 
50.            }] 
51.        }); 
52.         
53.        new Ext.Viewport({ 
54.            items: [form] 
55.        }); 
56.     
57.    }); 
58.</script> 
1.2使用HTML原始的提交形式



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



[javascript] view plaincopy
01.<%@ page language="java"  pageEncoding="UTF-8"%> 
02.<%    
03.    response.setContentType("text/html; charset=utf-8"); 
04.    request.setCharacterEncoding("UTF-8"); 
05.    response.setCharacterEncoding("UTF-8"); 
06.    String name = request.getParameter("name"); 
07.    System.out.println(name);    
08.%> 

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.                    var basicForm = form.getForm();//获取basicForm对象 
21.                    if(basicForm.isValid()){//如果客户端的验证通过则返回真 
22.                        var element =basicForm.getEl(); 
23.                        element.dom.action = 'list.jsp'; 
24.                        element.dom.submit(); 
25.                    } 
26.                } 
27.            },{ 
28.                text : '重置', 
29.                handler : function(){ 
30.                    var basicForm = form.getForm();//获取basicForm对象 
31.                    basicForm.reset(); 
32.                } 
33.            }] 
34.        }); 
35.         
36.        new Ext.Viewport({ 
37.            items: [form] 
38.        }); 
39.     
40.    }); 
41.</script> 
1.3单纯Ajax



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

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.    System.out.println("name="+name); 
08.    if("lwc".equals(name)){   
09.        response.getWriter().write("{success:true,msg:'成功'}");   
10.    }else{   
11.        response.getWriter().write("{success:false,msg:'失败'}");   
12.    }   
13.%> 
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.                    var text = form.getForm().findField('name'); 
21.                    Ext.Ajax.request({ 
22.                        ////要访问的后台地址 
23.                        url : 'list.jsp', 
24.                        method : 'post', 
25.                        //params:{'name' : document.getElementById('name').value}, 
26.                        //params:{'name' : text.getValue()}, 
27.                        //序列化传入的form为编码后的url字符串 
28.                        params:Ext.Ajax.serializeForm(form.getForm().el.dom), 
29.                        success : function(response, options){ 
30.                            //接收服务器的数据返回 
31.                            var c1 = response.responseText; 
32.                            //将JSON字符串解码（解析）成为对象,如果JSON是无效的，该函数抛出一个语法错误 
33.                            var c2 = Ext.util.JSON.decode(c1); 
34.                            Ext.Msg.alert('信息',c2.success+'-'+c2.msg); 
35.                        }, 
36.                        //表示响应失败的回调函数 
37.                        //需要注意的是,这里返回的不是数据库或者业务之类的,而是HTTP返回404或者500错误 
38.                        failure : function(response){ 
39.                            //接收服务器的数据返回 
40.                            var c1 = response.responseText; 
41.                            //将JSON字符串解码（解析）成为对象,如果JSON是无效的，该函数抛出一个语法错误 
42.                            var c2 = Ext.util.JSON.decode(c1); 
43.                            Ext.Msg.alert('信息',c2.success+'-'+c2.msg); 
44.                        } 
45.                    }) 
46.                } 
47.            },{ 
48.                text : '重置', 
49.                handler : function(){ 
50.                    var basicForm = form.getForm();//获取basicForm对象 
51.                    basicForm.reset(); 
52.                } 
53.            }] 
54.        }); 
55.         
56.        new Ext.Viewport({ 
57.            items: [form] 
58.        }); 
59.     
60.    }); 
61.</script> 
2.表单验证




[javascript] view plaincopy
01.如果要使用表单验证必须获得Ext.QuickTips.init()的支持 
2.1借助vtype



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

代码




[javascript] view plaincopy
01.new Ext.form.TextField({ 
02.    fieldLabel : '邮箱', 
03.    name : 'email', 
04.    allowBlank : false, 
05.    vtype : 'email' 
06.} 
2.2 自定义效验规则


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



[javascript] view plaincopy
01.new Ext.form.TextField({ 
02.    fieldLabel : '文本框', 
03.    name : 'text', 
04.    regex : /^[\u4E00-\u9FA5]+$/, 
05.    regexText : '只能输入汉字' 
06.} 

2.3使用后台的效验信息




[plain] view plaincopy
01.为了配合后台效验,我们在submit的回调函数failure()做了点工作,通过action的failureType来判断响应失败是因为效验失败还是因为HTTP连接时的错误, 
02.从这里我们可以了解表单中的提交和普通Ajax的区别,普通Ajax的failure()回调函数只能在发生HTTP连接错误时执行,而表单的failure()回调函数可以处理包括连接错误和后台业务错误 
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 password1 = request.getParameter("password1"); 
07.    String password2 = request.getParameter("password2"); 
08.    if(password1.equals(password2)){ 
09.        response.getWriter().write("{success:true,msg:'成功'}"); 
10.    }else{ 
11.        response.getWriter().write("{success:false,msg:'失败',errors:{password1:'密码不一样',password2:'密码不一样'}}"); 
12.    } 
13.%> 

index.jsp




[javascript] view plaincopy
01.<%@ page language="java"  pageEncoding="UTF-8"%> 
02.<%   String rootpath = request.getContextPath();%> 
03.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
04.<html> 
05.  <head> 
06.    <link rel="stylesheet" type="text/css" href="<%=rootpath%>/ext/resources/css/ext-all.css"/> 
07.    <script type="text/javascript" src="<%=rootpath%>/ext/adapter/ext/ext-base.js"></script> 
08.    <script type="text/javascript" src="<%=rootpath%>/ext/ext-all.js"></script> 
09.    <script type="text/javascript" src="<%=rootpath%>/ext/ext-all-debug.js"></script> 
10.    <script type="text/javascript" src="<%=rootpath%>/ext/ext-lang-zh_CN.js"></script> 
11.    <script type="text/javascript" src="<%=rootpath%>/ext/PagingMemoryProxy.js"></script> 
12.    <script type="text/javascript" defer> 
13.        Ext.onReady(function(){ 
14.            Ext.QuickTips.init(); 
15.            Ext.form.Field.prototype.msgTarget = 'side'; 
16.            Ext.BLANK_IMAGE_URL = '<%=rootpath%>/ext/resources/images/default/s.gif'; 
17. 
18.            var form = new Ext.form.FormPanel({ 
19.                title : 'form标题',//头部的文本标题 
20.                width : 300, 
21.                height : 200, 
22.                buttonAlign : 'center', 
23.                labelAlign : 'right', 
24.                labelWidth : 100, 
25.                frame : true, 
26.                trackResetOnLoad : true, 
27.                items : [new Ext.form.TextField({ 
28.                    fieldLabel : '请输入密码', 
29.                    name : 'password1', 
30.                    allowBlank : false 
31.                }),{ 
32.                    xtype : 'textfield', 
33.                    fieldLabel : '请再输次密码', 
34.                    name : 'password2', 
35.                    allowBlank : false 
36.                }], 
37.                buttons : [{ 
38.                    text : '保存', 
39.                    handler : function(){ 
40.                        var basicForm = form.getForm();//获取basicForm对象 
41.                        if(basicForm.isValid()){//如果客户端的验证通过则返回真 
42.                            basicForm.submit({ 
43.                                url : 'list.jsp', 
44.                                method : 'post', 
45.                                waitTitle : "提示",//等待的标题 
46.                                waitMsg : '正在提交数据...',//等待的信息 
47.                                success : function(form,action){ 
48.                                    Ext.Msg.alert('信息',action.result.msg); 
49.                                }, 
50.                                failure : function(form,action){ 
51.                                    if(action.failureType == Ext.form.Action.SERVER_INVALID){ 
52.                                        Ext.Msg.alert('错误','后台验证失败'); 
53.                                    }else{ 
54.                                        Ext.Msg.alert('错误','无法访问后台'); 
55.                                    } 
56.                                     
57.                                } 
58.                            }); 
59.                        } 
60.                    } 
61.                },{ 
62.                    text : '重置', 
63.                    handler : function(){ 
64.                        var basicForm = form.getForm();//获取basicForm对象 
65.                        basicForm.reset(); 
66.                    } 
67.                }] 
68.            }); 
69.             
70.            new Ext.Viewport({ 
71.                items: [form] 
72.            }); 
73.             
74.        }); 
75.    </script> 
76.  </head> 
77.  <body> 
78.  </body> 
79.</html> 

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

3.2平行布局




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



[javascript] view plaincopy
01.var form = new Ext.form.FormPanel({ 
02.    title : 'form标题', 
03.    width : 800, 
04.    height : 400, 
05.    buttonAlign : 'center', 
06.        labelAlign : 'right', 
07.    labelWidth : 80, 
08.    frame : true, 
09.    trackResetOnLoad : true, 
10.    items : [{ 
11.        layout : 'column', 
12.        items : [{ 
13.            columnWidth : .33, 
14.            layout : 'form', 
15.            items:[{ 
16.                xtype : 'textfield', 
17.                fieldLabel : '两个字' 
18.            }] 
19.        },{ 
20.            columnWidth : .33, 
21.            layout : 'form', 
22.            items : [{ 
23.                xtype : 'textfield', 
24.                fieldLabel : '三个字' 
25.            }] 
26.        },{ 
27.            columnWidth : .33, 
28.            layout : 'form', 
29.            items : [{ 
30.                xtype : 'textfield', 
31.                fieldLabel : '四个字' 
32.            }] 
33.        }] 
34.    }] 
35.}); 
36.             
37.new Ext.Viewport({ 
38.    items: [form] 
39.}); 
3.3自定义布局


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



[plain] view plaincopy
01.items : [{ 
02.    fieldLabel : '姓名' 
03.},{ 
04.    fieldLabel : '年龄' 
05.},{ 
06.    xtypt : 'panel', 
07.    html : '<center><img src="lwc.jpg"/></center>' 
08.}]