最近在做一個第三方表報監控的系統，要用的很多資料展示的應用，發現用extjs和struts2的jsonplugin的結合解決問題很棒，專案已經上線，現在寫下步驟以便查閱。

步驟1、在專案中新增struts2的庫。如下

步驟2、新增Google的jsonplugin 外掛。

步驟3、寫action類，配置struts.xml檔案。

<package name="agnet-json" extends="json-default" namespace="/agent"> <action name="jsonDemo" class="com.voicesoft.agentbrowser.web.actions.JsonDemo"> <result type="json"> <param name="defaultEncoding">utf-8</param> </result> </action> </package>

在配置改action的時候務必加上<result type="json"> <param name="defaultEncoding">utf-8</param> </result>否則不相容ie7因為ie7只認識utf-8編碼格式不認識utf8格式，這個都是我研究好久搞出來的結論。

步驟4、新增extjs庫。

在extjs官方下載extjs庫引入庫檔案

步驟5、寫一個通過ext的jsonstore獲取資料，並用extjs的datagrid顯示資料的例子。

/** * panlegrid 分頁顯示json資料的例子 */ Ext.onReady(function() { var store = new Ext.data.JsonStore({ url : "/CallCenterMS/agent/jsonDemo.action", totalProperty : "results", root : "rows", remoteSort : true, fields : ['id', 'key0', 'key1', 'key2'] }); store.on('beforeload', function() { Ext.apply(this.baseParams, { test : 12 // 你需要傳的引數 }); }); store.load({ params : { start : 0,// 起始頁數 limit : 10 } }); var grid = new Ext.grid.GridPanel({ width : 500, height : 400, title : '分頁測試', store : store, defaults : { // width : 100, sortable : true }, // grid columns columns : [{ header : "id", dataIndex : 'id' }, { header : "key0", dataIndex : 'key0' }, { header : "key1", dataIndex : 'key1' }, { header : "key2", dataIndex : 'key2' }], loadMask : { msg : "資料載入中，請稍等..." }, bbar : new Ext.PagingToolbar({ pageSize : 10, store : store, displayInfo : true, beforePageText : ' 第 ', afterPageText : ' 共 {0} 頁 ', displayMsg : '當前顯示第 {0} 條到 {1}條，共計 {2} 條', emptyMsg : "沒有記錄" }), buttons : [{ text : '第二頁', listeners : { "click" : function() { store.load({ params : { start : 2,// 起始頁數 limit : 10 // 每次取的頁數 } }); } } }] }); grid.render(Ext.getBody()); })