步骤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 : ' 第 ',
afterPageText : ' 共 {0} 页 ',
displayMsg : '当前显示第 {0} 条到 {1}条,共计 {2} 条',
emptyMsg : "没有记录"
}),
buttons : [{
text : '第二页',
listeners : {
"click" : function() {
store.load({
params : {
start : 2,// 起始页数
limit : 10
// 每次取的页数
}
});
}
}
}]
});
grid.render(Ext.getBody());
})
转自:http://blog.csdn.net/open2job/archive/2009/11/11/4797277.aspx