最近公司做一个项目是把以前的WIN32程序WEB化,我用EXTJS3.0+.NET做,做表数据显示时分页功能始终不能实现,数据始终在一页上面,由于接触EXTJS不久,所以请高手些帮忙看一下,下面是源代码:var cm = new Ext.grid.ColumnModel([
{header:'ROLEID', dataIndex:'ROLEID',width:0,hidden:true},
{header:'角色名', dataIndex:'ROLENAME', sortable:true,width:480}
]);
// 数据源
store = new Ext.data.Store({
url: '../EgsmWebService.asmx/getRoles',
reader: new Ext.data.XmlReader(
{
totalRecords: 'rolecount',
record: 'roleinfo'
},
[
{name:'ROLEID'},
{name: 'ROLENAME'}
]
)
});
store.setDefaultSort('ROLEID', 'asc');
var bbar = new Ext.PagingToolbar(
{
pageSize: 12,
store: store,
displayInfo: true,
displayMsg: '当前显示 {0} - {1} 条,共 {2} 条',
emptyMsg: "无数据"
}
);
// GridPanel 组件
grid = new Ext.grid.GridPanel({
frame: true,
sortable:true,
enableHdMenu: false,
width :480,
height:300,
loadMask: {msg:'正在加载数据,请稍侯……'},
store: store,
cm: cm,
el:'rolegrid',
bbar: bbar,
viewConfig: {
forceFit:true
}
});
grid.on("cellclick",function (g,r,c,e){
ds = grid.getStore();
record=grid.getSelectionModel().getSelected();
});
grid.addListener('rowdblclick',function(t,r,e){});
grid.render();
store.load({params:{start:0,limit:12}}); 网上找了很多例子,都这么写的,但是我这么写就不行,我的数据也不只12行,它把所有数据都显示在一页上面,多了的就加了滚动条,请高手门帮忙解决一下。小弟先谢过了```
{header:'ROLEID', dataIndex:'ROLEID',width:0,hidden:true},
{header:'角色名', dataIndex:'ROLENAME', sortable:true,width:480}
]);
// 数据源
store = new Ext.data.Store({
url: '../EgsmWebService.asmx/getRoles',
reader: new Ext.data.XmlReader(
{
totalRecords: 'rolecount',
record: 'roleinfo'
},
[
{name:'ROLEID'},
{name: 'ROLENAME'}
]
)
});
store.setDefaultSort('ROLEID', 'asc');
var bbar = new Ext.PagingToolbar(
{
pageSize: 12,
store: store,
displayInfo: true,
displayMsg: '当前显示 {0} - {1} 条,共 {2} 条',
emptyMsg: "无数据"
}
);
// GridPanel 组件
grid = new Ext.grid.GridPanel({
frame: true,
sortable:true,
enableHdMenu: false,
width :480,
height:300,
loadMask: {msg:'正在加载数据,请稍侯……'},
store: store,
cm: cm,
el:'rolegrid',
bbar: bbar,
viewConfig: {
forceFit:true
}
});
grid.on("cellclick",function (g,r,c,e){
ds = grid.getStore();
record=grid.getSelectionModel().getSelected();
});
grid.addListener('rowdblclick',function(t,r,e){});
grid.render();
store.load({params:{start:0,limit:12}}); 网上找了很多例子,都这么写的,但是我这么写就不行,我的数据也不只12行,它把所有数据都显示在一页上面,多了的就加了滚动条,请高手门帮忙解决一下。小弟先谢过了```
当GridPanel加上PagingToolbar之后, 每次请求数据或者点上一页或下一页的时候, ajax都会向后台发送至少两个参数:start, limit, 你debug以下后台就知道了。所以ext分页是靠后台利用这两个参数取合适的数据来做的。
因为我刚才测试的时候我PagingToolbar的pageSize限制为3, 但是我发送4条数据页面还是现实4条,所以我猜测你后台都是取出所有的数据。
如果你看得懂jsp, 我的测试代码给你看看:
1.jsp:后台取数据用。我没有真连数据库,只是模拟取数据<%
request.setCharacterEncoding("utf-8");
String _start = request.getParameter("start");
String _limit = request.getParameter("limit");
int start = Integer.parseInt(_start);
int limit = Integer.parseInt(_limit);
//返回的json字符串
String responseString = "{total:50,data:[";
for(int i=0; i<limit; i++){
responseString+= ("{id: 'id" + i+start + "',name:'name" + i+start + "',email:'email" + i+start + "'}");
if(i!=limit-1){
responseString+= ",";
}
}
responseString+="]}";
System.out.println(responseString);
response.setCharacterEncoding("utf-8");
response.setContentType("text/json;charset=utf-8");
response.getWriter().write(responseString);
response.flushBuffer();
response.getWriter().close();
%>
前台paging.js:Ext.onReady(function(){
var store = new Ext.data.JsonStore({
root: 'data',
totalProperty: 'total',
id: 'id',
fields: [
{name: 'id', type: 'string'},
{name: 'name', type: 'string'},
{name: 'email', type: 'string'}
],
proxy: new Ext.data.HttpProxy({
url: 'http://localhost:8080/1.jsp'
})
}); var pagingBar = new Ext.PagingToolbar({
pageSize: 3,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display"
}); var grid = new Ext.grid.GridPanel({
el:'topic-grid',
width:500,
height:300,
title:'ExtJS Paging Test',
store: store,
columns:[
{header:"ID",dataIndex:"id"},
{header:"Name",dataIndex:"name"},
{header:"EMail",dataIndex:"email"}
],
bbar: pagingBar
});
grid.render();
store.load({params:{start:0, limit:3}});
});
请问一下你的webservice中怎么写的,可以把代码复制到这里吗回复下,看看如何解决的