Ext2.0 学习系列 ------- Ext Grid （二）

Ext2.0 学习系列(转) ------- Ext Grid （一）中已经介绍了静态的Grid如何显示，本章要简单的讲述一下，如何使用Struts和JSON，在Grid上显示数据。

JSON （JavaScript Object Notation）一种简单的数据格式，比xml更轻巧。JSON 是JavaScript 原生格式，这意味着在JavaScript 中处理JSON 数据不需要任何特殊的API 或工具包。

    JSON的规则很简单： 对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。具体细节参考http://www.json.org/json-zh.html。

    最近正好在学习Struts2.0，在此记录一下Struts2中使用JSON的一种方法。

1. 首先当然是搭建好你的Struts2的环境
2. 到http://json-lib.sourceforge.net下载需要依赖的jar包，json-lib-2.1-jdk15.jar。json还依赖了以下的第三方包：
  commons-beanutils.jar， commons-collections-3.1.jar， commons-lang-2.3.jar， ezmorph-1.0.4.jar
3. 下载JSON插件(jsonplugin-0.19.jar)，地址：http://code.google.com/p/jsonplugin/downloads/list，这个很好用！呵呵
4. 创建Action如下：

public class JsonAction extends ActionSupport {

    List<Person> pList = new ArrayList<Person>();

    public String execute() {

        Person p1 = new Person();
        Person p2 = new Person();
        p1.setName("shenchong");
        p1.setSex("男");
        p2.setName("sophia");
        p2.setSex("女");
        pList.add(p1);
        pList.add(p2);
        return SUCCESS;
    }

    @JSON(name = "Person")
    public List<Person> getPList() {
        return pList;
    }

}

其中，Person类是一个最简单的POJO，有两个属性name和sex。
5. 配置Action

<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
     "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
    <package name="com.demo" extends="json-default">
        <action name="Json" class="com.demo.JsonAction">
            <result type="json"/>
        </action>
        <!-- Add your actions here -->
    </package>
</struts>

    上面配置文件的“package”元素和以往不同的是，它扩展了“json- default”而不是“struts-default”。“json-default”是在jsonplugin-0.19.jar包里的struts -plugin.xml中定义的。该文件同时定义了“json”的结果类型，有兴趣的朋友可以打开此文件看看。
    如果你现在就访问http://localhost:8080/XXXX/Json.action，会出现出现下载文件对话框，原因是JSON插件将HTTP响应（Response）的MIME类型设为 “application/json”。把文件下载下来，用记事本打开，内容如下：
{"Person":[{"name":"shenchong","sex":"男"},{"name":"sophia","sex":"女"}]}
6. EXT的js这样写就可以了

Ext.onReady(function(){
	
	var store = new Ext.data.Store({
		proxy: new Ext.data.HttpProxy({
			url:'Json.action',
			method: 'GET'
		}),
		reader: new Ext.data.JsonReader({     
            root: 'Users',      
            id: 'id'
			},[{name: 'name', mapping: 'name'},
                 {name: 'sex', mapping: 'sex'}]     
		)
	});
	var column = new Ext.grid.ColumnModel([
		{header: '姓名', dataIndex: 'name', width: 100},
		{header: '性别', dataIndex: 'sex', width: 50}
	]);
	column.defaultSortable = true;
});

后面就是创建一个Grid显示了。

var grid = new Ext.grid.GridPanel({
		el: 'listUser-grid',
		width:700,     
		height:500,  
		title:'用户表',
		store: store,
		cm: column,
		trackMouseOver: false,
		sm: new Ext.grid.RowSelectionModel(),
bbar: new Ext.PagingToolbar({     
           pageSize: 25,     
           store: store,     
           displayInfo: true,     
           displayMsg: ' 本页显示从{0} 到 {1} 条，共 {2} 条数据',     
           emptyMsg: "没有可以显示的数据"     
       }) 
});
   grid.render();
   store.load();

jsp页面上加入一个div就可以了，id一定要是listUser-grid