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