form组件实现数据的提交和验证!这里讲的主要是后台验证,和服务器脚本的交互!
我用的是EXT2.2.1版本,比2.0版本配置项功能更强!
数据提交用到的是submit函数!继承自Action,其自身多了一个clientValidation 配置项,表示是否设置前台验证!
我这里就讲了数据的提交,至于数据的加载基本上是一样的配置!自己参照API手册,主要是熟悉后台数据生成格式!JSON,并且success和data是必须的!
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();
}
}]
})
})
login.jsp
<%@ 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);
%>
虽然简单也传上原代码:
分享到:
相关推荐
Ext+jsp+servlet做到学生信息管理系统(带数据库),我自己做的,可以运行的。
EXT+JSP教学管理小系统(集成WebQQ)源码整理
ext+jsp分页---好不好,大家说了算。下载不扣分,回帖加1分,欢迎下载,童叟无欺。ext+jsp分页---好不好,大家说了算。下载不扣分,回帖加1分,欢迎下载,童叟无欺。ext+jsp分页---好不好,大家说了算。下载不扣分,...
Ext+Jsp+Hibernate 学生信息管理 使用Ext做界面,Jsp负责转发页面,Hibernate负责数据持久化。使用了很多常用的Ext组件。使初学者学习的不错的案例。界面不多,主要包括了Grid的使用,Form表单的使用,Ajax无刷新...
ext+jsp+servlet+access开的学生档案管理系统
只要加载好extjs2.0,login.html中加载的元素路径正常就OK
Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery Ext + Jquery
Ext+ssh 实现增删改查小例子,最近用 Ext+Strut2+Spring2.5+Hibernate3.2写了一个小例子,适合初学者,希望更多的人能快速上手,如果觉得写得还行,请留言.
一个基于EXT+JSP教学管理小系统(集成WebQQ)源码例子
使用ext2.0+json+jsp动态加载树的Myeclipse项目,可以直接导入Myeclipse看效果
JSP+Ext实现CURD
JSP+ext+人力资源管理系统
一个基于AJAX+EXT+ PHP技术实现的班级通讯录典型源码例子。
基于javaweb+jsp的物流管理系统(Ext+SSH)
一个EXT+js实现的Grid表格合并的例子源码
java+ext+数据库基础实现增删查改,学习用
Ext+swfupload实现多文件上传(java版),是从MyEclipse工程中导出的war包,已通过测试,绝对能运行成功.
Ext+ssh2学习项目 用户名admin 密码admin
ext+ssh实例,一个人力资源管理系统,以及一个ext前台,ssh处理逻辑的系统