ExtJs - Struts2 整合(1) - 登录页面
初学 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;}@Overridepublic 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" name="code">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
-----------------------------------------------------