ExtJs实现动态加载Grid完整示例

先铺垫一下背景。在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"%>



    
    
    
    
    







运行起来效果应该类似下面的截图——一个带分页和排序的表格，数据来自后端的JSON接口。


整个过程并不复杂，核心就是前端Store的配置要与后端返回的JSON结构保持一致。字段名、根节点名、还有Action里属性的getter – 哪一环对不上，数据就出不来。调试的时候可以先单独访问action地址，确认JSON输出正确，再回到前端页面调Store。