struts和extjs整合示例

ExtJS是一个开发RIA的利器，在这里，将写一个Struts2和ExtJS整合的示例，以方便广大的开发者，学习者。。。

约定：

1、为了开发方便，不使用数据访问。

2、为了稍微体现一点分层思想，设置控制器层和业务逻辑层。

3、该示例的功能是使用ExtJS和JSON格式数据在JSP页面中显示一个表格，该表格将显示一些用户信息数据。用户信息数据直接来自编写的程序代码。

4、整个事例的开发结构图如下：

 

开发步骤：

以分层思想的开发步骤编写相应的代码。

第一步：导入相关的开发包，ExtJS库文件，配置web.xml文件，详细设置省略。（友情提示：使用了json-lib）

第二步：编写相应的实体类User.java，如下：

Java代码  

1. package com.wgs.pojo;  
2.   
3. import java.io.Serializable;  
4.   
5. public class User implements Serializable {  
6.   
7.     /** 
8.      *  
9.      */  
10.     private static final long serialVersionUID = 949408143352061092L;  
11.     private int id;  
12.     private String name;  
13.     private String gender;  
14.     private int age;  
15.   
16.     public User() {  
17.   
18.     }  
19.   
20.     public User(int id, String name, String gender, int age) {  
21.         this.id = id;  
22.         this.name = name;  
23.         this.gender = gender;  
24.         this.age = age;  
25.     }  
26.       
27.     public int getId() {  
28.         return id;  
29.     }  
30.   
31.     public void setId(int id) {  
32.         this.id = id;  
33.     }  
34.   
35.     public String getName() {  
36.         return name;  
37.     }  
38.   
39.     public void setName(String name) {  
40.         this.name = name;  
41.     }  
42.   
43.     public String getGender() {  
44.         return gender;  
45.     }  
46.   
47.     public void setGender(String gender) {  
48.         this.gender = gender;  
49.     }  
50.   
51.     public int getAge() {  
52.         return age;  
53.     }  
54.   
55.     public void setAge(int age) {  
56.         this.age = age;  
57.     }  
58.   
59.     @Override  
60.     public String toString() {  
61.         return "User [id=" + id + ", name=" + name + ", gender=" + gender  
62.                 + ", age=" + age + "]";  
63.     }  
64.   
65. }  

 

第三步：编写相应的Service业务逻辑层代码UserService.java，如下:

Java代码  

1. package com.wgs.service;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. import net.sf.json.JSONArray;  
7.   
8. import com.wgs.pojo.User;  
9.   
10. public class UserService {  
11.   
12.     public List<User> findAll() {  
13.         List<User> list = new ArrayList<User>();  
14.         User u1 = new User(1001, "Wgssmart", "男", 21);  
15.         User u2 = new User(1002, "Jane", "女", 21);  
16.         User u3 = new User(1003, "Tom", "男", 21);  
17.         User u4 = new User(1004, "Lily", "女", 21);  
18.         User u5 = new User(1005, "Lucy", "女", 21);  
19.         User u6 = new User(1006, "Jim", "男", 21);  
20.         list.add(u1);  
21.         list.add(u2);  
22.         list.add(u3);  
23.         list.add(u4);  
24.         list.add(u5);  
25.         list.add(u6);  
26.         return list;  
27.     }  
28.       
29.     public String getAllJson() {  
30.         return "{rows:" + JSONArray.fromObject(findAll()).toString() + "}";  
31.     }  
32. }  

 第四步：编写相应的Action代码，UserAction.java，如下：

Java代码  

1. package com.wgs.action;  
2.   
3. import com.wgs.service.UserService;  
4.   
5. public class UserAction {  
6.   
7.     private String jsonUser;  
8.   
9.     public UserAction() {  
10.   
11.     }  
12.   
13.     public void setJsonUser(String jsonUser) {  
14.         this.jsonUser = jsonUser;  
15.     }  
16.   
17.     public String getJsonUser() {  
18.         return jsonUser;  
19.     }  
20.       
21.     public String execute() {  
22.         System.out.println("Hello");  
23.         UserService us = new UserService();  
24.         System.out.println(us.getAllJson());  
25.         setJsonUser(us.getAllJson());  
26.         return "success";  
27.     }  
28.       
29. }  

 第五步：配置struts.xml文件，详细配置如下：

Java代码  

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.   
6. <struts>  
7.     <package name="user" namespace="/user" extends="struts-default">  
8.         <action name="listUser" class="com.wgs.action.UserAction">  
9.             <result name="success" type="dispatcher">/user_list.jsp</result>  
10.         </action>  
11.     </package>  
12. </struts>  

 第六步：编写相应的ExtJS代码，作用是发送一个Ajax请求调用Struts框架中的Action，Action将返回JSON格式的用户信息数据，ExtJS将JSON格式的用户信息数据显示到Ext的表格组件中。如下：

Js代码  

1. SimpleGrid = function(config) {  
2.     Ext.apply(this, config);  
3.     this.colModel = new Ext.grid.ColumnModel( {  
4.         defaults : {  
5.             align : "center",  
6.             sortable : true,  
7.             menuDisabled : true,  
8.             width : 120  
9.         },  
10.         columns : [ {  
11.             header : "编号",  
12.             dataIndex : "id"  
13.         }, {  
14.             header : "姓名",  
15.             dataIndex : "name"  
16.         }, {  
17.             header : "性别",  
18.             dataIndex : "gender"  
19.         }, {  
20.             header : "年龄",  
21.             dataIndex : "age"  
22.         } ]  
23.     });  
24.     this.store = new Ext.data.Store( {  
25.         proxy : new Ext.data.HttpProxy( {  
26.             url : "user/listUser.action",  
27.             method : "post"  
28.         }),  
29.         reader : new Ext.data.JsonReader({  
30.             root : "rows"             
31.         },  [ {  
32.             name : "id",  
33.             mapping : "id"  
34.         }, {  
35.             name : "name",  
36.             mapping : "name"  
37.         }, {  
38.             name : "gender",  
39.             mapping : "gender"  
40.         }, {  
41.             name : "age",  
42.             mapping : "age"  
43.         } ])  
44.     });  
45.     SimpleGrid.superclass.constructor.call(this);  
46. }  
47. Ext.extend(SimpleGrid, Ext.grid.GridPanel);  
48.   
49. Ext.onReady(function() {  
50.     new SimpleGrid( {  
51.         title : "用户列表",  
52.         width : 500,  
53.         height : 300,  
54.         listeners : {  
55.             afterrender : function(gp) {  
56.                 gp.store.load();  
57.             }  
58.         }  
59.     }).render(Ext.getBody());  
60. });  

 第七步：编写index.jsp文件，导入相关的js代码（包括ExtJS的核心库文件和刚刚编写的ListUser.js文件），如下：

Java代码  

1. <%@ page language="java" contentType="text/html; charset=utf-8"  
2.     pageEncoding="utf-8"%>  
3. <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>  
4. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
5. <html>  
6. <head>  
7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
8. <title>index page</title>  
9. <link rel="stylesheet" type="text/css"  
10.     href="./ext3/resources/css/ext-all.css"></link>  
11. <script type="text/javascript" src="./ext3/adapter/ext/ext-base.js"></script>  
12. <script type="text/javascript" src="./ext3/ext-all.js"></script>  
13. <script type="text/javascript" src="./ext3/ext-lang-zh_CN.js"></script>  
14. <script type="text/javascript" src="./js/UserList.js"></script>  
15. </head>  
16. <body>  
17. </body>  
18. </html>  

 第八步：编写user_list.jsp文件，用户信息将在这个页面上显示出来，关键是获取Struts框架中的ValueStack。如下：

Java代码  

1. <%@ page language="java" contentType="text/html; charset=utf-8"  
2.     pageEncoding="utf-8"%>  
3.   
4. <%@ page import="java.util.*,com.opensymphony.xwork2.util.*"%>  
5. <%  
6.     ValueStack vs = (ValueStack) request  
7.             .getAttribute("struts.valueStack");  
8.     String jsonUser = vs.findString("jsonUser");  
9.     response.getWriter().println(jsonUser);  
10. %>  

 好了，所有代码都编写完毕。进入测试阶段，打开浏览器，输入http://localhost:8080/ExtStruts（前提是已经部署好应用并启用了Tomcat服务器），效果如下：