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

最新推荐文章于 2015-08-27 18:42:51 发布
最新推荐文章于 2015-08-27 18:42:51 发布
阅读量5.5k 收藏 7
点赞数
分类专栏： Extjs 文章标签： function ajax json string layout action
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/itlwc/article/details/7872993
版权

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

itlwc
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExtJS 的表单验证机制(Form Validation)
个人技术积累
01-06 7390
在 Extjs 中，表单(form)提供了各种各样的验证机制和方法，在这里总结一下 在讲解表单验证前需要先说一下错误提示(Tips)的配置 在 Ext.onReady 中添加以下两行代码： //初始化组件的信息提示功能 Ext.QuickTips.init(); //指示错误提示出现的方式 Ext.form.Field.prototype.msgTarget = 'under';
ext js ajax表单校验,ExtJs4 validator 文本框ajax校验-form.validate()有效
weixin_39895684的博客
08-05 286
xtype : 'textfield',id : 'processName',name : 'processName',fieldLabel : '服务名称',labelWidth : 70,width : 400,allowBlank : false,blankText : '不能为空',validateOnChange : false,textValid : true, // 默认校验通过...
EXTJS 表单验证方法大全
刘鹏的技术宅
05-30 1626
EXTJS前台表单方法验证一览 Ext.onReady(function(){ var form = new Ext.form.FormPanel({ labelAlign: 'right', labelWidth: 250 }); form.add(new Ext.form.TextField({ fieldLabel: '不能为空', allowBlan
ExtJs表单验证的方法总结
长江七号
02-12 1404
一、基本验证方式，使用vtype属性。 1.alpha只能输入字母，无法输入其他（如数字，特殊符号等） 2.alphanum只能输入字母和数字，无法输入其他 3.email验证，要求的格式是596005496@qq.com 4.url格式验证，要求的格式是http://www.baidu.com 二、其他方式验证。 1.验证最大最小输入字数。（Ext中maxLe
extjs 表单验证实例
热门推荐
adolfsabin的专栏
05-03 1万+
//放在onReady的function（）{}中Ext.QuickTips.init();                       //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。Ext.form.Field.prototype.msgTarget=side;         //提示的方式，枚举值为qtip-当鼠标移动到控件上面时显示提示title-
ExtJs 表单提交登陆实现代码
10-28
上一篇简单做了一个用ext写的登陆界面，今天来实现登陆效果，主要是回顾下ext中表单提交方法的使用。
Extjs表单常见验证小结
10-26
总结来说，ExtJS表单验证提供了丰富的选项，从基础的空验证和简单的vtype验证，到自定义函数验证和正则表达式验证，几乎可以覆盖所有常见的验证需求。通过这些验证方式，开发者可以确保用户输入的数据既安全又符合...
extjs-form:使用 Sencha ExtJS 的简单表单
07-06
通过理解表单组件、布局、验证规则以及表单提交机制，开发者可以构建出满足各种需求的复杂表单应用。在 `extjs-form-master` 示例中，你可以通过实际代码学习这些概念，并将它们应用于自己的项目中。
Extjs优化(二)Form表单提交通用实现
10-27
本篇文章主要介绍了一种优化的EXTJS表单提交方法，通过精简代码，提高了开发效率。下面我们将详细探讨这个优化的表单提交通用实现。 首先，我们来看一下提供的优化代码： ```javascript /** * 提交表单 */ ...
ext表单验证问题---验证是否可以提交
小杰的专栏
06-09 4143
由于刚开始使用ext，对表单进行验证完后，即使验证不通过，
EXT表单验证之TextField
01-14
EXT表单验证之TextField,vtype 包括所有EXT中TextField的验证方式
Extjs form validate表单验证使用心得
weixin_30627381的博客
07-18 177
extjs表单验证//放在onReady的function（）{}中Ext.QuickTips.init(); //为组件提供提示信息功能，form的主要提示信息就是客户端验证的错误信息。Ext.form.Field.prototype.msgTarget='side'; //提示的方式，枚举值为 qtip-当鼠标移动到控件上面时显示提示 title-在浏览器的标题显示，但是测试结果是...
EXTJS 验证与表单提交
weixin_34015566的博客
04-04 95
自定义验证： //自定义VType类型，验证日期选择范围 Ext.apply(Ext.form.VTypes, { //验证方法 dateRange : function(val, field) { if(field.dateRange){ var beginId = field.dateRange.begin; this.begi...
for循环判断条件中尽量不写函数
陈氏春秋
03-22 4740
这个问题我已经造成两次超时了 第一次：for(i=0;i 第二次：for(;i 因此，以后再写for循环的话，尽量不把函数什么的写在判断条件中，比如 第一个可以这样来写：for(=0,len=strlen(ch);i 独学而无友，则孤陋寡闻。果真如此，切记！
Ext.net 表单验证
ningyuanhuo的专栏
05-23 1833
实现代码如下： 1: &lt;ext:SimpleForm ID="SimpleForm1" runat="server" Width="500px" BodyPadding="5px" EnableBackgroundColor="true" 2: Title="用户注册表单"&gt; 3: &lt;Items&gt;
Extjs表单验证的编写方法及vtypes集合
kingfs
08-27 1420
Extjs5.1中默认的vtype有字符验证，字母数字验证，email验证，必填项验证，但是对于大部分界面的需求来讲，这些是不够的，我们需要自己写一些验证。本文讲解了编写vtype的方法，并且提供一个自己编写的vtype集合，希望能对初学者有点帮助
Ext表单验证
weixin_30610755的博客
09-03 77
//大家在很多的extjs代码中都看到了这两个，他们都起提示作用的Ext.QuickTips.init();//支持tips提示Ext.form.Field.prototype.msgTarget='side';//提示的方式，枚举值为"qtip","title","under","side",id(元素id)//side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示，其他的我就不...
extjs设置表单提交
最新发布
07-12
在 ExtJS 中设置表单提交可以通过以下步骤完成： 1. 创建一个表单组件： ```javascript var form = Ext.create('Ext.form.Panel', { id: 'myForm', url: 'submit.php', // 表单提交的URL standardSubmit: false,...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值