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 columnscolumns : [{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());})