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

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如下：Java代码
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;
}

}

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. 配置ActionXml代码
<!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>

<!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这样写就可以了
Java代码
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;
});

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显示了。
Java代码
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();

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