Ext+JSP实现数据提交

最新推荐文章于 2013-04-12 10:01:35 发布

beyond1993

最新推荐文章于 2013-04-12 10:01:35 发布

阅读量149

点赞数

分类专栏： Extjs 文章标签： EXT JSP json javascript Extjs ViewUI

Extjs 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

[size=large]form组件实现数据的提交和验证!这里讲的主要是后台验证,和服务器脚本的交互!
我用的是EXT2.2.1版本,比2.0版本配置项功能更强!
数据提交用到的是submit函数！继承自Action，其自身多了一个clientValidation 配置项，表示是否设置前台验证!
我这里就讲了数据的提交,至于数据的加载基本上是一样的配置!自己参照API手册,主要是熟悉后台数据生成格式!JSON,并且success和data是必须的!
[/size]

action.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
	<head>
		<title>action.html</title>
		<style type="text/css">  
			body{background-color:#777777} 
			#form-ac{width: 350px;margin-left: auto;margin-right: auto;} 
		</style>  
		<link rel="stylesheet" type="text/css" href="../Ext/resources/css/ext-all.css" />
		<script type="text/javascript" src="../Ext/adapter/ext/ext-base.js"></script>
		<script type="text/javascript" src="../Ext/ext-all.js"></script>
		<script type="text/javascript" src="action.js"></script>
	</head>
	<body>
			<div id="form-ac"></div>
	</body>
</html>

action.js


Ext.onReady(function(){
	Ext.QuickTips.init();
	Ext.form.Field.prototype.msgTarget = 'qtip';
	var panel = new Ext.form.FormPanel({
		width:250,
		height:170,
		animCollapse :true,
		title:'Action实现数据提交',
		renderTo : 'form-ac',
		frame:true,
		collapsible :true,
		items:[{
			xtype:'fieldset',
			title:'数据提交测试',
			autoHeight:true,
			items:[{
				xtype:'textfield',
				allowBlank:false,
				blankText:'UserName不能为空!',
				fieldLabel:'UserName',
				name:'userName',
				anchor : '95%'
			},{
				xtype:'textfield',
				allowBlank:false,
				blankText:'Pssword不能为空!',
				fieldLabel:'Pssword',
				name:'pass',
				inputType:'password',
				anchor : '95%'
			}]
		}],
		buttons:[{
			text:'提交',
			handler:function(){
				if(panel.form.isValid()){
					panel.form.submit({
						clientValidation :true,//是否实行前台验证
						method:'GET',//发送发送方式 GET，POST
						waitMsg :'正在登陆.....请等待...',//提交信息时候等待信息
						waitTitle :'登陆',//提交信息时候等待信息的标题
						url:'login.jsp',//提交页面
						timeout :200,//超时的秒数
						success:function(form,action){//验证成功的执行函数
							Ext.Msg.alert('提示','登陆成功,userName:'+action.result.data.userName+",Pssword:"+action.result.data.password);
							//实现登陆成功后的更多操作可以到这里，比如实现跳转或者设置session
						},
						failure :function(form,action){//验证失败的执行函数
							Ext.Msg.alert('提示','登陆失败,原因:'+action.result.errors.rs);
							//这里也可以做相应的处理，比如设置错误的次数，多少次之后设置锁定帐号或者IP，这方面我以后讲解
						}
					});
				}
			}
		},{
			text:'重置',
			handler:function(){
				panel.form.reset();
			}
		}]
	})
})


<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String password = request.getParameter("pass");
String userName = request.getParameter("userName");
String msg = "";
if("hello".equals(userName)&&"world".equals(password)){
	msg="{success:true,data:{userName:'"+userName+"',password:'"+password+"'}}";
	//成功时候的返回信息
}else{
	msg="{success:false,errors:{rs:'password和userName不匹配,请重新输入'}}";
	//失败时候的返回信息
}
response.getWriter().write(msg);
%>

虽然简单也传上原代码：

beyond1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext+JSP实现数据提交

[size=large]form组件实现数据的提交和验证!这里讲的主要是后台验证,和服务器脚本的交互!我用的是EXT2.2.1版本,比2.0版本配置项功能更强!数据提交用到的是submit函数！继承自Action，其自身多了一个clientValidation 配置项，表示是否设置前台验证!我这里就讲了数据的提交,至于数据的加载基本上是一样的配置!自己参照API手册,主要是熟悉后台数据...
复制链接

扫一扫