Ext表单的一些应用

表单验证

• FormPanel创建之前需要做一些初始化工作
  

//验证失败，提示信息显示初始化(msgTarget为side和qtip时有用)

Ext.QuickTips.init();

//设置验证失败后，默认验证失败信息显示模式(共5种qtip,title,under,side,[element id],可参见Field的msgTarget属性)

Ext.form.Field.prototype.msgTarget = 'side';

• Field的设置验证的属性是validator（可参见Field的validator属性，当返回true时表示验证通过，返回其它则验证失败并认为是验证失败的提示信息）
  

validator:function(val){
	if(val=='xiangqian'){
		return true;
	}else{
		return 'please input xiangqian';
	}
}

表单提交

simple.getForm().submit({
	url:'<c:url value="/pages/ext/response.jsp"/>',
	method:'POST',
	waitMsg:'正在提交...',
	success:function(form,action){
		 Ext.Msg.alert('Success', action.result.msg);
	},failure:function(form,action){
		switch (action.failureType) {
			//如果表单验证未通过
			case Ext.form.Action.CLIENT_INVALID:
				Ext.Msg.alert('Failure', 'Form fields may not be submitted with invalid values');
				break;
			//如果Ajax调用时连接失败
			case Ext.form.Action.CONNECT_FAILURE:
				Ext.Msg.alert('Failure', 'Ajax communication failed');
				break;
			//如果服务端调用时success属性值为非(true或'true')时
			case Ext.form.Action.SERVER_INVALID:
			   Ext.Msg.alert('Failure', action.result.msg);
	   }
	}
});

提交表单时使用BasicForm的submit方法。表单提交后，有两个回调函数succcess和failure。

回调success函数情况有1种：

1. 服务端响应并且成功，内容格式是{success:true,msg:'successful'}，必须包括属性名success，如果属性名success的值为true或者'true'，则表示成功

回调failure函数情况有3种：

1. 表单提交时action.failureType值为Ext.form.Action.CLIENT_INVALID，表示客户端验证失败
2. 表单提交时action.failureType值为Ext.form.Action.CONNECT_FAILURE，表示提交时连接失败
3. 表单提交时action.failureType值为Ext.form.Action.SERVER_INVALID，表示提交时服务端响应失败，响应内容中属性名success的值非(true或'true')，则表示服务端响应失败