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 JS如何与JSP协同工作，实现客户端与服务器之间的数据交换，特别是在用户登录这种常见的应用场景中。EXT JS提供了丰富的UI组件和易于使用的API，而JSP则负责后端的业务逻辑和数据访问。...
EXT+JSP教学管理小系统是一款基于Java技术开发的教学管理系统，它集成了WebQQ功能，为师生提供了一种便捷的在线沟通方式。该系统的核心知识点包括EXT库的应用、JSP技术、Servlet处理、数据库交互以及WebQQ接口的整合...
4. **EXT Form**：用于创建各种表单，如员工信息录入、请假申请等，与后端数据交互，实现数据的提交和验证。 整体来看，“JSP+EXT+人力资源管理系统”是一个典型的Java Web应用，结合了服务器端的动态处理能力与...
在IT行业中，"JSP+Ext实现CURD"是一个常见的开发任务，涉及到Web应用的后端和前端交互，用于数据的创建(Create)、读取(Read)、更新(Update)和删除(Delete)操作。JSP（JavaServer Pages）是Java的一种动态网页技术，...
通过Ajax通信，EXT可以异步地与JSP交互，实现无刷新的数据更新，提高系统的响应速度。 在实际项目中，开发人员会创建JSP页面来处理HTTP请求，然后使用EXT的JSONP或XMLHttpRequest进行跨域数据交换。EXT从JSP返回的...
EXTJS的组件通过Ajax请求与SpringMVC的RESTful接口进行通信，获取或提交数据。EXTJS的Store负责数据缓存和异步加载，与Hibernate的ORM机制相结合，实现了数据的透明处理。此外，EXTJS的Model可以与后台的Java Bean...
总的来说，EXT Grid是JSP开发中实现Ajax数据表格的强大工具，它提供了一系列高级特性和灵活的配置选项，使开发者能够快速构建高效且用户友好的数据展示界面。通过熟练掌握EXT Grid的使用，你可以提高Web应用的交互性...
在EXT中，文件上传通常通过EXT.form.FileField组件实现，这个组件允许用户选择本地文件，并通过Ajax方式提交到服务器。EXT.js库提供了一套完整的API，可以自定义上传表单的样式和行为，如添加按钮、预览功能、错误...
2. **表单提交**：当用户选择好文件后，可以通过`Ext.Ajax.request`或者`Ext.form.Basic.submit`方法将表单数据发送到服务器。表单数据会封装在一个FormData对象中，方便Struts2处理。 3. **Struts2配置**：在...
在本案例中，我们看到一个使用Ext JS 2.2进行登录实现的方法，结合了Struts2和JSON来处理用户输入和响应。以下是这个登录方法的详细解释： 1. **依赖库**： - `Commons-logging-1.0.4.jar`: Apache Commons ...
在本示例中，它与Ext JS 2.2集成，利用JSON（JavaScript Object Notation）进行数据交换，实现用户登录功能。以下是这个登录方法的关键知识点： 1. **依赖库**： - `Commons-logging-1.0.4.jar`：Apache Commons ...
在IT行业中，网页开发经常会遇到文件上传的需求，而"jSP+EXTJS实现upload UploadDialog"就是一种常见的解决方法。这个话题主要涵盖了两个关键部分：JavaServer Pages (JSP) 和 ExtJS，它们共同用于创建一个具有文件...
这个系统是一个基于Web的图片管理解决方案，它利用EXT的前端组件库来提供用户友好的界面，同时结合JSP和Java进行后端数据处理和业务逻辑实现。 EXT是一个强大的JavaScript库，主要用于构建富客户端应用程序。它提供...
【Ext Jsp 聊天室 jschat】是一款基于Ext JavaScript库和JSP技术构建的在线聊天室，专为学习和研究Ext框架的初学者设计。这个项目旨在提供一个实践平台，帮助开发者深入理解Ext的功能和JSP在构建动态Web应用中的应用...
在EXT项目中，MySQL作为数据存储，存储EXT前端提交的数据，同时也为EXT提供查询和操作数据的后端接口。EXT通过AJAX请求与JSP通信，JSP再通过SQL语句与MySQL交互，完成数据的增删改查操作。 综上所述，"ext项目 源码...
EXT JS库提供了丰富的组件库，如GridPanel（数据网格）、FormPanel（表单）、ComboBox（下拉框）等，这些组件可以轻松地绑定到数据源，实现数据的动态展示和编辑。在学生管理系统中，我们可以使用GridPanel显示学生...
通过使用JSP、Struts、Hibernate、Spring和Ext JS等技术，该系统实现了从前端展示到后端数据处理的完整流程。对于学习和理解如何构建一个完整的Web应用来说，这是一个非常有价值的学习案例。开发者可以通过分析该...
当用户选择图片并提交上传请求时，EXT会异步地发送文件数据到服务器，同时更新页面状态（如显示上传进度），而无需整个页面重新加载。这提升了用户体验，避免了传统方式中页面跳转或刷新带来的中断感。 4. **前端...
总结起来，EXTJS的登录验证表单提交涉及前端表单组件的创建、事件监听、数据提交，以及后端服务器的接收和验证。通过这种方式，我们可以实现一个完整的用户登录流程。理解这一过程对于进行Web应用开发至关重要，因为...