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.}]