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;
	}

	@Override
	public 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" class="com.wgs.action.UserAction">
			<result name="success" 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服务器），效果如下：