ext js json 数据

1.引入struts2核心jar包，与jsonplugin-0.32.jar

2.配置struts.xml文件

[html]view plain copy
       
   
<constant name="struts.i18n.encoding" value="utf-8"/>  
<package name="example" namespace="/" extends="json-default">  
        <action name="gridUtil" class="com.bict.GridUtil" method="grid">   
            <result type="json" /> <!--将bean属性以json字符串返回浏览器-->  
        </action>   
    <action name="gridAction" class="com.bict.util.ClientModel" method="getJSONPage">  
        <result name="success">/json_grid.jsp</result>  
    </action>  
</package>  

配置struts.i18n.encoding常量，不再使用GBK编码，而是UTF-8编码，这是回为AJAX的POST请求都是以UTF-8的方式进行编码的。

3.后台部分User.java

[java]view plain copy
       
   
package com.bict;  
import java.util.List;  
public class User {  
        private int id;   
        private String name;   
        private String age;   
        private String descn;  
    public int getId() {  
        return id;  
    }  
    public void setId(int id) {  
        this.id = id;  
    }  
    public String getName() {  
        return name;  
    }  
    public void setName(String name) {  
        this.name = name;  
    }  
    public String getAge() {  
        return age;  
    }  
    public void setAge(String age) {  
        this.age = age;  
    }  
    public String getDescn() {  
        return descn;  
    }  
    public void setDescn(String descn) {  
        this.descn = descn;  
    }  
      
}  

定义了一个User对象，当作数据载体

4.gridUtil.java

[java]view plain copy
       
   
package com.bict;  
  
import java.util.ArrayList;  
import java.util.List;  
import com.bict.User;  
  
import com.opensymphony.xwork2.ActionSupport;  
  
public class GridUtil extends ActionSupport {  
    private int totalProperty = 100;  
    private List root;  
  
    public List getRoot() {  
        return root;  
    }  
  
    public void setRoot(List root) {  
        this.root = root;  
    }  
  
    public int getTotalProperty() {  
        return totalProperty;  
    }  
  
    public void setTotalProperty(int totalProperty) {  
        this.totalProperty = totalProperty;  
    }  
  
    public String grid() {  
        root = new ArrayList<User>();  
        User user1 = new User();  
        user1.setAge("20");  
        user1.setDescn("descn1");  
        user1.setId(1);  
        user1.setName("name1");  
        root.add(user1);  
        User user2 = new User();  
        user2.setAge("19");  
        user2.setDescn("descn2");  
        user2.setId(2);  
        user2.setName("name2");  
        root.add(user2);  
  
        return SUCCESS;  
  
    }  
  
}  

定义了一个Action用于进行数据转化与返回。可以在这里进行与数据库交互，totalProperty是总记录数，root是所有数据库取出的值，它是一个List集合。

5.json_grid.jsp,引入Ext-3.2.1相关配置

[html]view plain copy
       
   
    <link href="ext-3.2.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">  
    <script type="text/javascript" src="ext-3.2.1/adapter/ext/ext-base.js"></script>  
    <script type="text/javascript" src="ext-3.2.1/ext-all.js"></script>  
    <script type="text/javascript" src="ext-3.2.1/src/locale/ext-lang-zh_CN.js"></script>  
    <script type="text/javascript" src="js/json_grid.js"></script>  
    <body>  
       <div id="grid"></div>  
    </body>  

6.json_grid.js

[html]view plain copy
       
   
Ext.onReady(function(){  
    var ds = new Ext.data.Store({  
            proxy: new Ext.data.HttpProxy({  
                url:'gridUtil.action'  
            }),  
            reader: new Ext.data.JsonReader({  
                totalProperty: 'totalProperty',  
                root: 'root'  
            }, [  
                {name: 'id'},  
                {name: 'name'},  
                {name: 'descn'}  
            ])  
    });  
      
  
    ds.load({params:{start:0,limit:10}});  
      
      
     var sm = new Ext.grid.CheckboxSelectionModel();   
      
    var cm = new Ext.grid.ColumnModel([   
        new Ext.grid.RowNumberer(),   
        sm,   
        {header:'编号',dataIndex:'id'},   
        {header:'名称',dataIndex:'name'},   
        {header:'年龄',dataIndex:'age'},   
        {header:'描述',dataIndex:'descn'}   
    ]);   
    cm.defaultSortable = true;   
   
    var ds = new Ext.data.Store({   
        proxy: new Ext.data.HttpProxy({url:'gridUtil.action'}),   
        reader: new Ext.data.JsonReader({   
            totalProperty: 'totalProperty',   
            root: 'root'   
        }, [   
            {name: 'id'},   
            {name: 'name'},   
            {name: 'descn'},{name:'age'}   
        ])   
    });   
    ds.load({params:{start:0,limit:10}});   
      
    var grid = new Ext.grid.GridPanel({   
        el: 'grid',   
        ds: ds,   
        cm: cm,   
        sm: sm,   
        title: 'struts2->JSON',   
        //height:400,   
        autoHeight: true,   
       bbar: new Ext.PagingToolbar({   
            pageSize: 10,   
            store: ds,   
            displayInfo: true,   
            displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',   
            emptyMsg: "没有记录"   
        })  
    });   
    grid.render();   
})  
 

猜你喜欢