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