Struts2和ExtJS的整合示例
ExtJS是一个开发RIA的利器，在这里，将写一个Struts2和ExtJS整合的示例，以方便广大的开发者，学习者。。。
约定：
1、为了开发方便，不使用数据访问。
2、为了稍微体现一点分层思想，设置控制器层和业务逻辑层。
3、该示例的功能是使用ExtJS和JSON格式数据在JSP页面中显示一个表格，该表格将显示一些用户信息数据。用户信息数据直接来自编写的程序代码。
4、整个事例的开发结构图如下：
?
开发步骤：
以分层思想的开发步骤编写相应的代码。
第一步：导入相关的开发包，ExtJS库文件，配置web.xml文件，详细设置省略。（友情提示：使用了json-lib）
第二步：编写相应的实体类User.java，如下：
package com.wgs.pojo;import java.io.Serializable;public class User implements Serializable {/** * */private static final long serialVersionUID = 949408143352061092L;private int id;private String name;private String gender;private int age;public User() {}public User(int id, String name, String gender, int age) {this.id = id;this.name = name;this.gender = gender;this.age = age;}public int getId() {return id;}public void setId(int id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getGender() {return gender;}public void setGender(String gender) {this.gender = gender;}public int getAge() {return age;}public void setAge(int age) {this.age = age;}@Overridepublic String toString() {return "User [id=" + id + ", name=" + name + ", gender=" + gender+ ", age=" + age + "]";}}?第三步：编写相应的Service业务逻辑层代码UserService.java，如下:
package com.wgs.service;import java.util.ArrayList;import java.util.List;import net.sf.json.JSONArray;import com.wgs.pojo.User;public class UserService {public List<User> findAll() {List<User> list = new ArrayList<User>();User u1 = new User(1001, "Wgssmart", "男", 21);User u2 = new User(1002, "Jane", "女", 21);User u3 = new User(1003, "Tom", "男", 21);User u4 = new User(1004, "Lily", "女", 21);User u5 = new User(1005, "Lucy", "女", 21);User u6 = new User(1006, "Jim", "男", 21);list.add(u1);list.add(u2);list.add(u3);list.add(u4);list.add(u5);list.add(u6);return list;}public String getAllJson() {return "{rows:" + JSONArray.fromObject(findAll()).toString() + "}";}}?第四步：编写相应的Action代码，UserAction.java，如下：
package com.wgs.action;import com.wgs.service.UserService;public class UserAction {private String jsonUser;public UserAction() {}public void setJsonUser(String jsonUser) {this.jsonUser = jsonUser;}public String getJsonUser() {return jsonUser;}public String execute() {System.out.println("Hello");UserService us = new UserService();System.out.println(us.getAllJson());setJsonUser(us.getAllJson());return "success";}}?第五步：配置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="user" namespace="/user" extends="struts-default"><action name="listUser" type="dispatcher">/user_list.jsp</result></action></package></struts>
?第六步：编写相应的ExtJS代码，作用是发送一个Ajax请求调用Struts框架中的Action，Action将返回JSON格式的用户信息数据，ExtJS将JSON格式的用户信息数据显示到Ext的表格组件中。如下：
SimpleGrid = function(config) {Ext.apply(this, config);this.colModel = new Ext.grid.ColumnModel( {defaults : {align : "center",sortable : true,menuDisabled : true,width : 120},columns : [ {header : "编号",dataIndex : "id"}, {header : "姓名",dataIndex : "name"}, {header : "性别",dataIndex : "gender"}, {header : "年龄",dataIndex : "age"} ]});this.store = new Ext.data.Store( {proxy : new Ext.data.HttpProxy( {url : "user/listUser.action",method : "post"}),reader : new Ext.data.JsonReader({root : "rows"}, [ {name : "id",mapping : "id"}, {name : "name",mapping : "name"}, {name : "gender",mapping : "gender"}, {name : "age",mapping : "age"} ])});SimpleGrid.superclass.constructor.call(this);}Ext.extend(SimpleGrid, Ext.grid.GridPanel);Ext.onReady(function() {new SimpleGrid( {title : "用户列表",width : 500,height : 300,listeners : {afterrender : function(gp) {gp.store.load();}}}).render(Ext.getBody());});?第七步：编写index.jsp文件，导入相关的js代码（包括ExtJS的核心库文件和刚刚编写的ListUser.js文件），如下：
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>index page</title><link rel="stylesheet" type="text/css"href="./ext3/resources/css/ext-all.css"></link><script type="text/javascript" src="./ext3/adapter/ext/ext-base.js"></script><script type="text/javascript" src="./ext3/ext-all.js"></script><script type="text/javascript" src="./ext3/ext-lang-zh_CN.js"></script><script type="text/javascript" src="./js/UserList.js"></script></head><body></body></html>
?第八步：编写user_list.jsp文件，用户信息将在这个页面上显示出来，关键是获取Struts框架中的ValueStack。如下：
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%><%@ page import="java.util.*,com.opensymphony.xwork2.util.*"%><%ValueStack vs = (ValueStack) request.getAttribute("struts.valueStack");String jsonUser = vs.findString("jsonUser");response.getWriter().println(jsonUser);%>?好了，所有代码都编写完毕。进入测试阶段，打开浏览器，输入http://localhost:8080/ExtStruts（前提是已经部署好应用并启用了Tomcat服务器），效果如下：
