初学 ExtJS，在此记录下学习过程中的点点滴滴，以备不时只需，也希望能给跟我一样的菜鸟一些帮助，老鸟请忽略。如有不当之处，欢迎指正。
开发环境：
MyEclipse 6.5
Struts 2.1.8
ExtJs 3.0
1. 准备工作
首先需要配置 Struts2 和 ExtJS，具体操作这里不再多说。
2. 登录页面
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login Page Test-2</title>
<!-- 引入ExtJS所需文件-->
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/extjs/ext-all.js"></script>
<script type="text/javascript">
var loginForm;
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'js/extjs/resources/images/default/s.gif';
Ext.QuickTips.init();
// 定义一个 FormPanel 对象
loginForm = new Ext.FormPanel({
width: 400,
frame: true,
renderTo: "loginForm",
title: "登录",
method: "POST",
monitorValid: true, // 该属性表示表单在通过验证之前提交按钮无效
labelWidth: 50, // 标签宽度
labelAlign: "left", // 标签的对齐方式
labelPad: 0, // 标签与输入框的间隔
buttonAlign: 'center', // 底部按钮居中对齐
items: [
{
xtype: "textfield",
fieldLabel: "用户名",
allowBlank: false, // 是否允许为空, 默认为 true
blankText: "用户名不能为空", // 显示错误提示信息
name: "user.username", // name 属性应与 Struts2 Action 中的属性保持一致
id: "username",
width: 300
},
{
xtype: "textfield",
inputType: "password",
fieldLabel: "密 码",
allowBlank: false,
blankText: "密码不能为空",
name: "user.password",
id: "password",
width: 300
}
],
buttons: [
{
text: "登 录",
formBind: true,
handler: doLogin
},
{
text: "重 置",
handler: doReset
}
],
keys: [
{
key: [10, 13],
fn: doLogin
}
],
// 表单不使用AJAX方式提交
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.action = "login.action";
this.getEl().dom.submit();
}
});
});
// 登录
function doLogin() {
if(loginForm.form.isValid()) {
loginForm.form.submit();
}
}
// 重置
function doReset() {
loginForm.form.reset();
}
</script>
</head>
<body>
<div id="loginForm" style="margin: 100px">
</div>
</body>
</html>
页面效果如下图所示：
3. Java 类编辑
3.1 User 类
/***********************************************************************
* <p>Project Name: extjs</p>
* <p>File Name: com.thu.afa.extjs.bean.User.java</p>
* <p>Copyright: Copyright (c) 2010</p>
* <p>Company: <a href="http://afa.thu.com">http://afa.thu.com</a></p>
***********************************************************************/
package com.thu.afa.extjs.bean;
import java.io.Serializable;
/**
* <p>Class Name: User</p>
* <p>Description: </p>
* @author Afa
* @date Aug 4, 2010
* @version 1.0
*/
public class User implements Serializable
{
private static final long serialVersionUID = 2851358330179740778L;
private String username;
private String password;
public String getUsername()
{
return username;
}
public void setUsername(String username)
{
this.username = username;
}
public String getPassword()
{
return password;
}
public void setPassword(String password)
{
this.password = password;
}
}
3.2 Action 类
/***********************************************************************
* <p>Project Name: extjs</p>
* <p>File Name: com.thu.afa.extjs.action.UserAction.java</p>
* <p>Copyright: Copyright (c) 2010</p>
* <p>Company: <a href="http://afa.thu.com">http://afa.thu.com</a></p>
***********************************************************************/
package com.thu.afa.extjs.action;
import com.opensymphony.xwork2.ActionSupport;
import com.thu.afa.extjs.bean.User;
/**
* <p>Class Name: UserAction</p>
* <p>Description: </p>
* @author Afa
* @date Aug 4, 2010
* @version 1.0
*/
public class UserAction extends ActionSupport
{
private static final long serialVersionUID = 3093253656888703000L;
private User user;
public User getUser()
{
return user;
}
public void setUser(User user)
{
this.user = user;
}
@Override
public String execute() throws Exception
{
return ("test".equals(user.getUsername()) && "test".equals(user.getPassword())) ? SUCCESS : INPUT;
}
}
4. 配置文件 struts.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
"http://struts.apache.org/dtds/struts-2.1.7.dtd">
<struts>
<package name="com.thu.afa.extjs" extends="struts-default">
<action name="login" class="com.thu.afa.extjs.action.UserAction">
<result name="success">/result.jsp</result>
<result name="input">/login.jsp</result>
</action>
</package>
</struts>
5. 部署运行
开发过程完成，部署运行即可。
6. 注意事项
6.1 表单元素的 name 属性
name: "user.username", // name 属性应与 Struts2 Action 中的属性保持一致
6.2 表单的提交地址
this.getEl().dom.action = "login.action";
-----------------------------------------------------
Stay Hungry, Stay Foolish!
http://yarafa.iteye.com
Afa
Aug 4th, 2010
-----------------------------------------------------
分享到：
相关推荐
整合ExtJS和Struts2的主要目的是利用ExtJS的前端能力增强用户界面，同时利用Struts2的后端处理能力和灵活性处理业务逻辑。具体整合步骤包括： 1. **配置Struts2**：在Struts2的配置文件(struts.xml)中定义Action，...
文章可能通过一个实际项目或示例，详细解释了如何将ExtJS的Grid Panel与Struts 2通过JSON进行数据交互，帮助读者理解这两种技术的整合过程。学习这些内容有助于提升Web应用的用户体验，实现数据的实时更新和交互。
将ExtJS与Struts整合，可以利用ExtJS的前端交互能力，结合Struts的强大后端处理，打造高性能的Web应用。通常，整合过程涉及以下几个关键步骤： 1. **配置Struts2 Action：** 在Struts2的配置文件中定义Action，这些...
【整合Struts2与Extjs】 在Web开发中，前端和后端的数据交互是必不可少的，特别是对于富客户端应用，如使用Extjs构建的界面。传统的数据获取方式可能涉及Servlet或其他HTTP服务接口，但这样的方式在处理大量数据请求...
综上所述，这个压缩包提供的资料可能涵盖了如何在Struts2中配置和使用Hibernate进行数据持久化，如何利用Spring进行依赖管理和数据访问，以及如何结合ExtJS创建富客户端界面并利用JSON进行前后端通信。对于想要深入...
EXTJS是一个用于构建交互式前端界面的JavaScript库，而STRUTS2则是Java后端开发中的流行框架之一。通过整合这两项技术，可以实现更加灵活高效的应用程序开发。 #### 二、环境准备与基础配置 1. **创建项目**： - ...
这样的整合使得开发者能够利用ExtJS的前端优势，提供美观且交互性强的用户界面，同时利用Struts在服务器端进行数据处理和业务控制。 首先，我们需要在项目中引入ExtJS库和Struts框架的相关依赖。通常，ExtJS的库...
ExtJS是一个强大的JavaScript库，提供了丰富的用户界面组件，而Struts2是Java Web开发中的一个MVC框架，用于处理后端业务逻辑。下面，我们将会讲解如何整合这两个技术来实现前端的文件选择和上传，以及后端的文件...
在实际项目中，这样的整合可以利用Struts2的强大处理能力和ExtJS的出色用户界面，创建出功能丰富且用户体验优秀的Web应用。 描述中的“Struts2与extjs整合例子”暗示我们将通过一个实际的示例来了解整合过程。这...
在整合 Struts2 时，你需要确保添加了必要的依赖库，例如 `struts2-json-plugin-2.1.8.jar`，这个插件允许 Struts2 将结果直接转换为 JSON 格式，便于与 ExtJS 通信。 配置方面，你需在 `web.xml` 文件中设置 ...
在Struts2和ExtJS整合中，JSON起到桥梁作用，将服务器端的Action产生的数据转换为JSON格式，然后由ExtJS前端解析并显示在界面上。 整合Struts2、ExtJS和JSON的步骤通常包括以下几个部分： 1. **设置Struts2的JSON...
1. **Struts2与ExtJS的通信方式**： - JSON：由于Struts2和ExtJS都是异步的，通常通过JSON（JavaScript Object Notation）进行数据交换。Struts2可以通过配置Action返回JSON结果，ExtJS则解析这些JSON数据并更新...
1. **创建（Create）**: 用户通过ExtJS的表单组件输入数据，发送AJAX请求到Struts2 Action，Action利用Spring注入的Hibernate SessionFactory创建一个新的实体对象，并持久化到数据库。 2. **读取（Read）**: 当...
在与Struts2结合时，Struts2的JSON插件可以将服务器端的数据转换成JSON格式，方便ExtJS的组件直接使用，实现异步数据加载和页面动态更新。 总的来说，这个DEMO展示了如何将这些技术有效地整合，构建一个完整的Java ...
这种组合允许前端利用ExtJS的强大界面组件来提供美观、交互性强的用户界面，而后端通过Struts2处理业务逻辑和数据操作，实现前后端的分离。 在"Extjs+Struts2系统后台管理框架"中，"新闻列表"功能通常涉及到以下几...
ExtJS、Struts2和JDBC是Web开发中常见的技术栈，它们的结合可以构建功能丰富的交互式Web应用。这个小例子提供了一个基于这些技术的简单增删改查（CRUD）操作的实现，对于初学者来说是一个很好的学习资源。 ExtJS是...
【图书管理系统源码（ExtJs+struts2+hibernate+spring）】是一个基于Web的软件项目，它展示了如何整合多种技术来构建一个实际的应用系统。这个管理系统使用了前端框架ExtJs，后端MVC框架Struts2，持久层框架...
ExtJS和Struts2是两种在Web开发中广泛使用的开源技术。ExtJS是一个JavaScript库，提供了丰富的用户界面组件，如数据网格、图表、表单等，用于构建富客户端应用程序。Struts2则是一个基于MVC设计模式的Java Web框架，...
"Spring3+iBatis3+Struts2.18+ExtJS3整合增删查改"是一个典型的Java Web开发组合，用于实现高效的数据管理和用户界面交互。下面我们将深入探讨这个组合中的每个组件及其在整体架构中的作用。 **Spring3**： Spring...