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

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

因为FormPanel是布局容器,没有提供submit()函数,所以要先获取它内部包含的BasicForm,才能提交
这个示例中,后台接收数据的脚本是list.jsp,与以前方式相同,唯一的区别就是不再跳转,只需要返回一个JSON字符串提供操作是否成功,
表单默认使用Ajax提交数据,Ajax可以回调,何况表单还封装了自己的处理方式,首先修改submit方法,让它支持更多的功能,
ext.lib.Ajax中,判断究竟是调用了success还是failure的条件与业务无关,如果http响应成功就返回success,如果出现404或者500错误就执行failure
form中的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>'
}]

你可能感兴趣的:(Ajax,json,function,String,layout,action)