上篇文章我们已经把最核心的ExtJS代码贴出来了。慢慢消化着，我们先来一个完整的登陆应用。登陆页面如下：
1.login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W<chmetcnv w:st="on" unitname="C" sourcevalue="3" hasspace="False" negative="False" numbertype="1" tcsc="0">3C</chmetcnv>//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
<script type="text/javascript" src="resources/js/ext-base.js"></script>
<script type="text/javascript" src="resources/js/ext-all.js"></script>
<script type="text/javascript" src="resources/js/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="resources/js/login.js"></script>
</head>
<body>
</body>
</html>
2.其中使用到的login.js
Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// 使用表单提示
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
// 定义表单
var login = new Ext.FormPanel({
labelWidth : 75,
monitorValid : true,// 把有formBind:true的按钮和验证绑定
baseCls : 'x-plain',
defaults : {
width : 150
},
defaultType : 'textfield',// 默认字段类型
// 定义表单元素
items : [{
fieldLabel : '帐户',
name : 'login.uname',// 元素名称
// anchor:'95%',//也可用此定义自适应宽度
allowBlank : false,// 不允许为空
blankText : '帐户不能为空!'// 错误提示内容
}, {
inputType : 'password',
fieldLabel : '密码',
// anchor:'95%',
name : 'login.upass',
allowBlank : false,
blankText : '密码不能为空!'
}],
buttons : [{
text : '登陆',
formBind : true,
type : 'submit',
// 定义表单提交事件
handler : function() {
if (simple.form.isValid()) {// 验证合法后使用加载进度条
Ext.MessageBox.show({
title : '请稍等',
msg : '正在登陆...',
progressText : '',
width : 300,
progress : true,
closable : false,
animEl : 'loading'
});
// 控制进度速度
var f = function(v) {
return function() {
var i = v / 11;
Ext.MessageBox
.updateProgress(i, '');
};
};
for (var i = 1; i < 12; i++) {
setTimeout(f(i), i * 150);
}
// 提交到服务器操作
login.form.doAction('submit', {
url : 'login.do',// 文件路径
method : 'post',// 提交方法post或get
params : '',
// 提交成功的回调函数
success : function(form, action) {
if (action.result.msg == 'ok') {
window.location = 'index.jsp';
} else {
Ext.Msg
.alert(
'登陆失败',
action.result.msg);
}
},
// 提交失败的回调函数
failure : function() {
Ext.Msg.alert('错误',
'服务器出现错误请稍后再试！');
}
});
}
}
}, {
text : '取消',
handler : function() {
login.form.reset();
}// 重置表单
}]
});
// 定义窗体
var win = new Ext.Window({
id : 'loginWin',
title : '用户登陆',
layout : 'fit', // 布局方式fit，自适应布局
width : 300,
height : 150,
modal : true,
plain : true,
bodyStyle : 'padding:5px;',
maximizable : false,// 禁止最大化
closeAction : 'close',
closable : false,// 禁止关闭
collapsible : true,// 可折叠
plain : true,
buttonAlign : 'center',
items : login
// 将表单作为窗体元素嵌套布局
});
win.show();// 显示窗体
});
看了上篇文章中的JS代码，这里的登陆JS真是小巫见大巫，简单的不行。我们看到，上面主要是一个窗口和一个表单，这个表单提交的URL为login.do,那我们服务器端就要一个Action组件来对此进行响应。接下来我们就来看下服务器端的代码：
package org.leno.houseHire.action;
import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import org.leno.houseHire.service.ILoginService;
import org.leno.houseHire.service.LoginDTO;
public class LoginAction extends Action {
private ILoginService loginService;
public void setLoginService(ILoginService loginService) {
this.loginService = loginService;
}
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request, HttpServletResponse response) throws Exception {
response.setCharacterEncoding("utf-8");
PrintWriter pw = response.getWriter();
LoginForm lForm = (LoginForm) form;
LoginDTO dto = lForm.getLogin();
boolean flag = loginService.valid(dto);
if(flag){
request.getSession().setAttribute("USER_INFO", dto);
pw.print("{success:true,msg:'ok'}");
}else{
pw.print("{success:true,msg:'用户名或密码错误！'}");
}
return null;
}
}
这里有几个地方要提醒下大家，首先是我们这里的Action也是利用Service做事，所以是由Spring来管理的，其次，我们依然采用实体DTO对象做ActionForm的属性，最后，也是最重要的一点，结合客户端的回调代码分析，要清楚服务器端返回给客户端的是一个JSON对象！这里使用到的其它JAVA类如下：
1.数据访问层（DAO及其实现）
package org.leno.houseHire.dao;
public interface ILoginDAO {
<p class
分享到：
相关推荐
**ExtJS实战——发布小纸条** 在Web应用开发中，ExtJS是一个强大的JavaScript库，它提供了丰富的用户界面组件和强大的数据绑定功能。本实战案例将带你深入理解如何结合ExtJS、Struts和MySQL来创建一个实用的“发布...
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有：border、form、absolute、column、accordion、table、fit、card、anchor 另外，不常见的布局有：tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
extjs-620-docs官方文档extjs-620-docs官方文档extjs-620-docs官方文档
ExtJS开发实战 ExtJS开发实战 上传只能选资源分，没办法，我想免费分享的
"extjs-theme-bootstrap" 是针对 EXTJS4 的一个主题，它借鉴了 Bootstrap 的设计风格，让 EXTJS4 应用程序具有更加现代化和一致的外观。 Bootstrap 是一个流行的前端开发框架，由 Twitter 推出，主要用于构建响应式...
语言程序设计资料：ExtJs学习笔记-2积分.doc
ExtJS快速入门--传智播客--蔡世友
extJs-5.0.1-gpl附带sencha cmd安装程序、ruby编译包（分为32位和64位）和教程，一共四部分
ExtJS 是一个强大的JavaScript库...随着技术的发展，现在的ExtJS已经更新到了更高级别的版本，例如ExtJS 7.x，加入了更多现代Web开发特性，如响应式设计、Material Design风格等，但其核心设计理念和组件模型依然适用。
一个extjs的OA项目 extjs-OA extjs-oaextjs-OA extjs-oa
Extjs6.2 生成的admin-dashboard官方模板
"extjs-theme-bootstrap-master.zip" 文件很可能是ExtJS的一个主题包，它集成了Bootstrap的样式，使得ExtJS组件能够呈现出Bootstrap的经典外观。 在深入讲解这个主题之前，让我们先了解一下基础概念： 1. **ExtJS*...
licensing@extjs.com http://extjs.com/license Open Source License Ext is licensed under the terms of the Open Source GPL 3.0 license. http://www.gnu.org/licenses/gpl.html There are several FLOSS ...
本资源"ExtJS-4.2.2-gpl.rar"是ExtJS 4.2.2的开源版本，适用于GPL许可协议，包含完整的源码、示例、API文档以及相关的文档资料，对于学习和开发基于ExtJS的应用程序非常有帮助。 1. **ExtJS 4.2.2 版本详解** ...
在"ExtJS----HelloWorld程序源码"中，我们将会看到如何使用ExtJS来创建一个简单的“你好，世界！”应用。以下是对这个示例中涉及的主要知识点的详细解释： 1. **引入ExtJS库**：首先，你需要在HTML文件中引入ExtJS...
在本例"ExtJS-MVC-用户列表实例"中，我们将深入探讨如何利用ExtJS的Model-View-Controller（MVC）架构来创建一个用户列表应用。 MVC模式是软件工程中常用的设计模式，它将应用程序分为三个主要部分：模型（Model）...
在"extjs-7.0.0-gpl"版本中，我们看到的是ExtJS框架的一个重要里程碑，这个版本引入了许多新特性、性能优化和兼容性的提升。 1. **组件化开发**：ExtJS 7.0.0的核心是其组件化的开发模式。组件可以是按钮、表格、...
此"extjs-620-docs.rar"压缩包包含了该版本的完全离线版API文档，旨在解决在没有网络连接或网络环境不稳定时，开发者仍然可以便捷地查阅和学习ExtJS 6.2.0的相关知识。 API 文档是任何开发者的重要工具，特别是对于...
extjs-620-docs,6.2.0离线文档，解压后可以布署到web服务器