29. ExtJs

转自：https://yarafa.iteye.com/blog/729197

初学 ExtJS，在此记录下学习过程中的点点滴滴，以备不时只需，也希望能给跟我一样的菜鸟一些帮助，老鸟请忽略。如有不当之处，欢迎指正。

开发环境：

MyEclipse 6.5

Struts 2.1.8

ExtJs 3.0

1. 准备工作

首先需要配置 Struts2 和 ExtJS，具体操作这里不再多说。

2. 登录页面

 1 <%@ page language="java" pageEncoding="UTF-8"%>
 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4     <head>
 5         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 6         <title>login Page Test-2</title>
 7 
 8         <!-- 引入ExtJS所需文件-->
 9         <link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
10         <script type="text/javascript" src="js/extjs/adapter/ext/ext-base.js"></script>
11         <script type="text/javascript" src="js/extjs/ext-all.js"></script>
12         <script type="text/javascript">
13             var loginForm;
14             Ext.onReady(function() {
15                 Ext.BLANK_IMAGE_URL = 'js/extjs/resources/images/default/s.gif';
16                 Ext.QuickTips.init();
17     
18                 // 定义一个 FormPanel 对象
19                 loginForm = new Ext.FormPanel({
20                      400,
21                     frame: true,
22                     renderTo: "loginForm",
23                     title: "登录",
24                     method: "POST",
25                     monitorValid: true, // 该属性表示表单在通过验证之前提交按钮无效
26                     labelWidth: 50, // 标签宽度
27                     labelAlign: "left", // 标签的对齐方式
28                     labelPad: 0, // 标签与输入框的间隔
29                     buttonAlign: 'center', // 底部按钮居中对齐
30                     
31                     items: [
32                         {
33                             xtype: "textfield",
34                             fieldLabel: "用户名",
35                             allowBlank: false, // 是否允许为空, 默认为 true
36                             blankText: "用户名不能为空", // 显示错误提示信息
37                             name: "user.username", // name 属性应与 Struts2 Action 中的属性保持一致
38                             id: "username",
39                              300
40                         },
41                         {
42                             xtype: "textfield",
43                             inputType: "password",
44                             fieldLabel: "密&nbsp;&nbsp;&nbsp;码",
45                             allowBlank: false,
46                             blankText: "密码不能为空",
47                             name: "user.password",
48                             id: "password",
49                              300
50                         }
51                     ],
52                     buttons: [
53                         {
54                             text: "登&nbsp;录",
55                             formBind: true,
56                             handler: doLogin
57                         },
58                         {
59                             text: "重&nbsp;置",
60                             handler: doReset
61                         }
62                     ],
63                     keys: [
64                         {
65                             key: [10, 13],
66                             fn: doLogin
67                         }
68                     ],
69                     
70                     // 表单不使用AJAX方式提交
71                     onSubmit: Ext.emptyFn,
72                     submit: function() {
73                         this.getEl().dom.action = "login.action";
74                         this.getEl().dom.submit();
75                     }
76                 });
77             });
78             
79             // 登录
80             function doLogin() {
81                 if(loginForm.form.isValid()) {
82                     loginForm.form.submit();
83                 }
84             }
85             
86             // 重置
87             function doReset() {
88                 loginForm.form.reset();
89             }
90         </script>
91     </head>
92 
93     <body>
94         <div id="loginForm" style="margin: 100px">
95         </div>
96     </body>
97 </html>

页面效果如下图所示：

3. Java 类编辑

3.1 User 类

 1 /***********************************************************************
 2  * <p>Project Name: extjs</p>
 3  * <p>File Name: com.thu.afa.extjs.bean.User.java</p>
 4  * <p>Copyright: Copyright (c) 2010</p>
 5  * <p>Company: <a href="http://afa.thu.com">http://afa.thu.com</a></p>
 6  ***********************************************************************/
 7 package com.thu.afa.extjs.bean;
 8 
 9 import java.io.Serializable;
10 
11 /**
12  * <p>Class Name: User</p>
13  * <p>Description: </p>
14  * @author Afa
15  * @date Aug 4, 2010
16  * @version 1.0
17  */
18 public class User implements Serializable
19 {
20     private static final long serialVersionUID = 2851358330179740778L;
21     
22     private String username;
23     private String password;
24     public String getUsername()
25     {
26         return username;
27     }
28     public void setUsername(String username)
29     {
30         this.username = username;
31     }
32     public String getPassword()
33     {
34         return password;
35     }
36     public void setPassword(String password)
37     {
38         this.password = password;
39     }
40 }

3.2 Action 类

 1 /***********************************************************************
 2  * <p>Project Name: extjs</p>
 3  * <p>File Name: com.thu.afa.extjs.action.UserAction.java</p>
 4  * <p>Copyright: Copyright (c) 2010</p>
 5  * <p>Company: <a href="http://afa.thu.com">http://afa.thu.com</a></p>
 6  ***********************************************************************/
 7 package com.thu.afa.extjs.action;
 8 
 9 import com.opensymphony.xwork2.ActionSupport;
10 import com.thu.afa.extjs.bean.User;
11 
12 /**
13  * <p>Class Name: UserAction</p>
14  * <p>Description: </p>
15  * @author Afa
16  * @date Aug 4, 2010
17  * @version 1.0
18  */
19 public class UserAction extends ActionSupport
20 {
21     private static final long serialVersionUID = 3093253656888703000L;
22     
23     private User user;
24     
25     public User getUser()
26     {
27         return user;
28     }
29 
30     public void setUser(User user)
31     {
32         this.user = user;
33     }
34 
35     @Override
36     public String execute() throws Exception
37     {
38         return ("test".equals(user.getUsername()) && "test".equals(user.getPassword())) ? SUCCESS : INPUT;
39     }
40 }

4. 配置文件 struts.xml

 1 <?xml version="1.0" encoding="UTF-8" ?>
 2 <!DOCTYPE struts PUBLIC
 3     "-//Apache Software Foundation//DTD Struts Configuration 2.1.7//EN"
 4     "http://struts.apache.org/dtds/struts-2.1.7.dtd">
 5 <struts>
 6     <package name="com.thu.afa.extjs" extends="struts-default">
 7         <action name="login" class="com.thu.afa.extjs.action.UserAction">
 8             <result name="success">/result.jsp</result>
 9             <result name="input">/login.jsp</result>
10         </action>
11     </package>
12 </struts>

5. 部署运行

开发过程完成，部署运行即可。

6. 注意事项

6.1 表单元素的 name 属性

Html代码

name: "user.username", // name 属性应与 Struts2 Action 中的属性保持一致

6.2 表单的提交地址

Html代码

this.getEl().dom.action = "login.action";