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

?

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

下载Google json插件http://code.google.com/p/jsonplugin/downloads/detail?name=jsonplugin-0.34.jar&can=2&q=，jsonplugin-0.34.jar??包放入项目的库中。注意版本要正确。

步骤3、写action类，配置struts.xml文件。

view plaincopy to clipboardprint?
<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>?
?<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显示数据的例子。

view plaincopy to clipboardprint?
/**?
?* 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 : ' 第 ',??
??????????????