ExtJs - Struts2 调整(1) - 登录页面
日期：2014-05-16 浏览次数：20318 次
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 = 285135
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
