轉自：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 width: 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 width: 300 40 }, 41 { 42 xtype: "textfield", 43 inputType: "password", 44 fieldLabel: "密 碼", 45 allowBlank: false, 46 blankText: "密碼不能為空", 47 name: "user.password", 48 id: "password", 49 width: 300 50 } 51 ], 52 buttons: [ 53 { 54 text: "登 錄", 55 formBind: true, 56 handler: doLogin 57 }, 58 { 59 text: "重 置", 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";?
- this.getEl().dom.action?=?"login.action";?
?
?
?
?
)
)
)
