ExtJs - Struts2 整合(1) - 登录页面

最新推荐文章于 2021-08-05 18:42:10 发布

原创最新推荐文章于 2021-08-05 18:42:10 发布 · 200 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #Struts #JavaScript #CSS #Bean #ViewUI

JavaEE 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用ExtJS和Struts2搭建一个简单的登录页面，并实现表单验证及登录功能。文章详细展示了HTML、JavaScript代码配置以及Java类编写过程。

初学 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: "密&nbsp;&nbsp;&nbsp;码",
			    			allowBlank: false,
			    			blankText: "密码不能为空",
			    			name: "user.password",
			    			id: "password",
			    			width: 300
			    		}
			    	],
			    	buttons: [
			    		{
			    			text: "登&nbsp;录",
			    			formBind: true,
			    			handler: doLogin
			    		},
			    		{
			    			text: "重&nbsp;置",
			    			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
-----------------------------------------------------