代碼如下:
Ext.onReady(function() {
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'db.jsp'}),
reader: new Ext.data.JsonReader({
root: 'root1',
totalProperty: 'total'},
[ {name: 'id',type: 'int'},
{name: 'name'},
{name: 'descn'}])
});
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'編號',dataIndex:'id'},
{header:'名稱',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
var grid = new Ext.grid.GridPanel({
el: 'table',
ds: ds,
cm: cm,
viewConfig: {
forceFit: true
},
title: 'My First Grid',
sm:sm,
width: 600,
height:380,
loadMask: true,
frame: true,
bbar: new Ext.PagingToolbar({
pageSize: 10,
store: ds,
displayInfo: true,
displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
emptyMsg: "沒有記錄"
})
})
ds.load({params:{start:0,limit:10}});
grid.render();
});
json傳的數據如下：
{total:100,root1:[
{id:0,name:'name0',descn:'descn0'},
{id:1,name:'name1',descn:'descn1'},
{id:2,name:'name2',descn:'descn2'},
{id:3,name:'name3',descn:'descn3'},
{id:4,name:'name4',descn:'descn4'},
{id:5,name:'name5',descn:'descn5'},
{id:6,name:'name6',descn:'descn6'},
{id:7,name:'name7',descn:'descn7'},
{id:8,name:'name8',descn:'descn8'},
{id:9,name:'name9',descn:'descn9'}
]}
jsp代碼如下：
<%
@ page contentType
=
"
text/html; charset=gbk
"
%>
<%
String start
=
request.getParameter(
"
start
"
);
String limit
=
request.getParameter(
"
limit
"
);
try
{
int
index
=
Integer.parseInt(start);
int
pageSize
=
Integer.parseInt(limit);
String json
=
"
{totalProperty:50,root1:[
"
;
for
(
int
i
=
index; i
<
pageSize
+
index; i
++
) {
if
(i
%
2
==
0
){
json
+=
"
{id:
"
+
i
+
"
,sex:'male
"
+
"
',name:'name
"
+
i
+
"
',descn:'descn
"
+
i
+
"
'}
"
;
}
else
{
json
+=
"
{id:
"
+
i
+
"
,sex:'female
"
+
"
',name:'name
"
+
i
+
"
',descn:'descn
"
+
i
+
"
'}
"
;
}
if
(i
!=
pageSize
+
index
-
1
) {
json
+=
"
,
"
;
}
}
json
+=
"
]}
"
;
response.getWriter().write(json);
}
catch
(Exception ex) {
}
%>