最近公司做一个项目是把以前的WIN32程序WEB化,我用EXTJS3.0+.NET做,做表数据显示时分页功能始终不能实现,数据始终在一页上面,由于接触EXTJS不久,所以请高手些帮忙看一下,下面是源代码:
- JScript code
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行,它把所有数据都显示在一页上面,多了的就加了滚动条,请高手门帮忙解决一下。小弟先谢过了```
------解决方案--------------------
刚刚下去做了个demo, 可以基本确定的是楼主没有理解ext分页的操作流程。
当GridPanel加上PagingToolbar之后, 每次请求数据或者点上一页或下一页的时候, ajax都会向后台发送至少两个参数:start, limit, 你debug以下后台就知道了。所以ext分页是靠后台利用这两个参数取合适的数据来做的。
因为我刚才测试的时候我PagingToolbar的pageSize限制为3, 但是我发送4条数据页面还是现实4条,所以我猜测你后台都是取出所有的数据。
如果你看得懂jsp, 我的测试代码给你看看:
1.jsp:后台取数据用。我没有真连数据库,只是模拟取数据
- Java code
<% 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(); %>