关于ext的分页问题 请高人指点谢谢
代码:
- HTML code
<link rel="stylesheet" type="text/css"
href="../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext/adapter/ext/ext-base.js"> </script>
<script type="text/javascript" src="../ext/ext-all.js"> </script>
<script type="text/javascript" src="../examples.js"> </script>
<script>
function renderSex(value){
if(value == 'male'){
return " <span style='color:red;font-weight:bold;'>男 </>"
}
else{
if(value == 'female'){
return " <span style='color:blue'>女 </>"
}
return " <span style='color:green;font-weight:lighter'>人妖 </>"
}
}
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = " <input type='button' value='查看详细信息' onclick='alert(\"" +
"这个单元格的值是:" + value + "\\n" +
"这个单元格的配置是:{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
"这个单元格对应行的record是:" + record + ",一行的数据都在里边\\n" +
"这是第" + rowIndex + "行\\n" +
"这是第" + columnIndex + "列\\n" +
"这个表格对应的Ext.data.Store在这里:" + store + ",随便用吧。" +
"\")'>";
return str;
}
Ext.onReady(function(){
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',sortable:true},
{header:'名称',dataIndex:'name',sortable:true},
{header:'性别',dataIndex:'sex',renderer:renderSex,sortable:true},
{header:'描述',dataIndex:'descn',renderer:renderDescn,sortable:true}
]);
var data = [
['1','name1','male','descn1'],
['2','name2','male','descn2'],
['3','name3','female','descn3'],
['4','name4','descn4'],
['5','name5','female','descn5']
];
var ds = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url:'grid.jsp?start=0&linit=10'}),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'name'},
{name: 'sex'},
{name: 'descn'}
])
});
ds.load();
var grid = new Ext.grid.GridPanel({
el: 'grid',
ds: ds,
cm: cm,
sm: sm,
bbar: new Ext.PagingToolbar({
pageSize: 2,
store: ds,
displayInfo: true,
displayMsg: "显示 {0} - {1} 条的数据,一共 {2} 条",
afterPageText: "页,共{0}页",
emptyMsg: "没有数据",
prevText: "上一页",
nextText: "下一页",
firstText: "第一页",
refreshText: "刷新"
}),
tbar: new Ext.PagingToolbar({
pageSize: 2,
store: ds,
displayInfo: true,
displayMsg: "显示 {0} - {1} 条的数据,一共 {2} 条",
afterPageText: "页,共{0}页",
emptyMsg: "没有数据"
}),
height:150,
width:500
});
grid.render();
ds.load({parmas:{start:0,limit:2}});
});
</script>
<div id='grid' style='height:256px;'>
</div>
这个是jsp的页面
- HTML code
<% String start=request.getParameter("start"); String limit=request.getParameter("limit"); try{ int index = 0; int pageSize = 10; if(start == null){ start = "0"; } if(limit == null){ limit = "10"; } index=Integer.parseInt(start); pageSize=Integer.parseInt(limit); 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 += "]}"; System.out.println(json); response.getWriter().write(json); }catch(Exception e){ e.printStackTrace(); }finally{ response.getWriter().close(); } %>这个是显示出来的数据
{totalProperty:100,root:[{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'}]}
页面没有报错 但是一天数据都没有
请高手指点谢谢
[解决办法]
- JScript code
reader: new Ext.data.JsonReader({root:"root",[ {name: 'id'}, {name: 'name'}, {name: 'sex'}, {name: 'descn'} ]})
[解决办法]
- JScript code
reader: new Ext.data.JsonReader({ fields: fields, root: 'root', totalProperty: 'totalProperty' }) 