Extjs整合struts2的jsonplugin的方法和注意事项

      最近在做一个第三方表报监控的系统，要用的很多数据展示的应用，发现用extjs和struts2的jsonplugin的结合解决问题很棒，项目已经上线，现在写下步骤以便查阅。

步骤1、在项目中添加struts2的库。如下

步骤2、添加Google的jsonplugin 插件。

下载Google json插件http://cwiki.apache.org/S2PLUGINS/json-plugin.html，jsonplugin-0.32.jar包放入项目的库中。注意版本要正确。

 

步骤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()); })