A) ExtJs代碼如下:
//
var cm = new Ext.grid.ColumnModel([
{header:'編號',dataIndex:'id'},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
//Ext.data.Store,可以把任何數據格式轉換成表格格式,store對應兩個不分:proxy和reader.是指
//獲取數據的方法,reader是指如何解析這堆數據。這裏我們使用了Ext.data.HttpProxy,它是用來專門
//獲取http中的數據,而Ext.data.JsonReader是用來專門解析JSON對象的。
//在看 id name 和descn屬性和cm的值對應的。
//totalProperty對應後臺返回的totalProperty,也就是數據的總數。root對應後臺代碼root
//就包含返回的數據的數組。
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'user'}),
reader:new Ext.data.JsonReader({
totalProperty:'totalProperty',
root:'root'
}, [
{name:'id'},
{name:'name'},
{name:'descn'}
])
});
// renderTo是指渲染什麼地方 可以通過HTML中的ID值來指定。
var grid = new Ext.grid.GridPanel({
renderTo: 'grid',
autoHeight: true,
viewConfig:{forceFit:true},//自動延伸
store:store,
cm:cm,
//Ext.PagingToolbar是一個分頁工具條對象。分頁屬性如下:
//pageSize:每頁顯示幾條數據。
//displayInfo:是否顯示數據信息。
//displayMsg:只有當displayInfo:true時候纔有效果,用來顯示有數據提醒效果
{0},{1},{2}會自動被替換成對應的數據。
//emptyMsg:沒有數據時候顯示信息。
bbar: new Ext.PagingToolbar({
pageSize:10,
store:store,
displayInfo:true,
displayMsg:'顯示第{0}條到{1}條記錄,一共{2}條',
emptyMsg:'沒有記錄'
})
});
//在Store進行加載時傳遞兩個參數告訴後臺從1條數據開始,最多讀10條數據。
store.load({params:{start:0,limit:10}});
B) 前臺JSP代碼如下:
<div id="grid" style="height: 265px;"></div>
C) 後臺代碼如下:
String start = request.getParameter("start");
String limit = request.getParameter("limit");
int index = Integer.parseInt(start);
int pageSize =Integer.parseInt(limit);
//這是後臺模擬的一個JSON數據 ,我們只需要知道JSON裏除了name就是value值就OK了。
// 開頭就是totalProperty:100,這裏表示一共有100條數據,而root對應的就是一個數組,數組裏
.//有10個對象,我們只需弄成json格式,然後輸入到response中,ext就能取到這些數據了。
String json ="{totalProperty:100,root:[";
for(int i = index;i<pageSize+index;i++){
json+="{id:"+i+",name:'name"+i+"',descn:'descn"+i+"'}";
if(i!=pageSize+index-1){
json+=",";
}
}
json+=" ]}";
PrintWriter out1 = response.getWriter();
out1.print(json);
System.out.println(json);
}catch(Exception e){
}