先铺垫一下背景。在ExtJS 3.3时代，把前端表格数据和后端Struts2结合起来，算是很常见的操作。数据表的层次结构其实和Ext.Store非常像：表～Store、记录～Record、字段～DataField。Store会先驱动DataProxy去加载数据，DataProxy完成后再由DataReader解析，最终产出Record对象。下面用一个完整示例走一遍这个过程。
1. Ja va Bean：Person类
首先定义一个简单的实体，用来装数据。四个字段：姓名、年龄、性别、生日。尽管写起来有点啰嗦，但这就是Ja va的风格。
package com.leo.bean;
public class Person {
private String name;
private int age;
private String sex;
private String birthday;
public Person(String name, int age, String sex, String birthday) {
super();
this.name = name;
this.age = age;
this.sex = sex;
this.birthday = birthday;
}
// getters and setters...
public String getName() { return name; }
public void setName(String name) { this.name = name; }
public int getAge() { return age; }
public void setAge(int age) { this.age = age; }
public String getSex() { return sex; }
public void setSex(String sex) { this.sex = sex; }
public String getBirthday() { return birthday; }
public void setBirthday(String birthday) { this.birthday = birthday; }
}
2. Struts2 Action：ExtjsAction
Action的作用就是准备数据，并通过JSON格式返回给前端。这里硬编码了三条记录作为演示，实际项目里肯定会从数据库查询。
package com.leo.action;
import ja va.util.ArrayList;
import ja va.util.List;
import com.leo.bean.Person;
import com.opensymphony.xwork2.ActionSupport;
public class ExtjsAction extends ActionSupport {
private long results;
private List items;
// getters and setters...
public long getResults() { return results; }
public void setResults(long results) { this.results = results; }
public List getItems() { return items; }
public void setItems(List items) { this.items = items; }
public String execute() throws Exception {
this.results = 3;
Person p1 = new Person("张三", 29, "男", "1990-10-22");
Person p2 = new Person("李四", 28, "男", "1991-03-30");
Person p3 = new Person("王五", 27, "女", "1993-08-17");
this.items = new ArrayList();
this.items.add(p1);
this.items.add(p2);
this.items.add(p3);
return SUCCESS;
}
}
3. struts.xml配置
这个配置文件最关键的一点是继承了json-default包，这样返回类型设为json时，Struts2的JSON插件就会自动把Action的属性序列化。注意，Action中results和items的getter方法就是为了给JSON序列化用的。
4. web.xml：整合Struts2
标准的Struts2过滤器配置，拦截所有.action请求。没什么特别的，但少了这一步前端就调不通。
struts2
org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter
struts2
*.action
5. JSP页面：ExtJS Grid
前端页面引入了ExtJS 3.1.1的样式和脚本。核心思路是：创建一个JsonStore，指定后台的action地址，设置数据根节点为items，然后定义四个字段。接着新建一个GridPanel，绑定store并配好列定义，最后把Grid放进一个Window里展示出来。注意layout:'fit'，让Grid填满整个窗口。
<%@ page language="ja va" import="ja va.util.*" pageEncoding="UTF-8"%>
ExtJs与Struts2结合
运行起来效果应该类似下面的截图——一个带分页和排序的表格，数据来自后端的JSON接口。
整个过程并不复杂，核心就是前端Store的配置要与后端返回的JSON结构保持一致。字段名、根节点名、还有Action里属性的getter – 哪一环对不上，数据就出不来。调试的时候可以先单独访问action地址，确认JSON输出正确，再回到前端页面调Store。
