Ext.PagingToolbar 分页问题
我后台传到客户端的数据是22条，我要实现每页显示5条数据，总共5页，奇怪是的，只能翻到第二页就不能往下翻页了，start 和 limit 的的变化如下：
初始化第一页的时候：start:0 limit:5
点击下一页进入第二页的时候：start:5 limit:5
点击下一页进入第三页的时候：start:10 limit:5，到这里就停了，继续点击下一页的时候依然是：start:10 limit:5，当前页显示的是第二页，正常的应该是：start:15 limit:5，为什么第一次翻页没问题，但是继续往后面翻就有问题了呢？这是为什么？贴出部分代码请高手指点一二，小弟感激不尽！
var ds = new Ext.data.Store({ reader:new Ext.data.JsonReader({ totalProperty:"totalProperty", root:"root", id:'id', fields:['id','userName','roleId','roleName','rName','useCompany','status','num','lastTime'] }), proxy: datas }); var gridDivId = "user_menu_"+this.pageId ; this.gridTable = new Ext.grid.GridPanel({ el: gridDivId, store:ds, cm:cm, sm:sma, stripeRows: true, //autoExpandColumn:2, viewConfig:{ forceFit:true }, //autoHeight:true, height:Main.getBodyHeight() - 10, width:Main.getBodyWidth() - 200, tbar : tbar, bbar : new Ext.PagingToolbar({ store : ds, afterPageText: '共{0}页', beforePageText: '当前页', lastText:"尾页", nextText :"下一页", prevText :"上一页", firstText :"首页", refreshText:"刷新页面", pageSize :5, displayInfo : true, displayMsg : ' {0} - {1} 条 共 {2} 条记录', emptyMsg : "暂无数据" }), title:'用户管理' }); this.gridTable.render(); ds.load({params:{start:0,limit:5}}); var store = new Ext.data.Store({ proxy: new Ext.data.HttpProxy({ url: "" }), reader: new Ext.data.JsonReader() }); var s = 20; var pageToolbar = new Ext.PagingToolbar({ pageSize: s, store: store, afterPageText: '/ {0}', beforePageText: '页', displayInfo: true, displayMsg: '显示 {0} - {1} / {2}', emptyMsg: '没有数据', firstText: '第一页', prevText: '前一页', nextText: '后一页', lastText: '最后一页', refreshText: '刷新', listeners: { "next": function() { } } }); // create the Grid var grid = new Ext.grid.GridPanel( { id : "grid", title : "查询结果", store : store, columns : cols, stripeRows : true, enableHdMenu: false, enableColumnMove: false, animCollapse: false, autoScroll: true, frame: true, loadMask: {msg: "检索中"}, bbar: pageToolbar }); grid.render('gridPanel'); store.load({params:{start:0, limit:s}});
[解决办法]
{'metaData': {totalProperty: 'totalProperty', root: 'root', id: 'id',
fields:
[{name: 'a'},
{name: 'b'},
{name: 'c'}]},
totalProperty: 736,
root:
[{'a':'1','b':'2','c':'3'},
{'a':'1','b':'2','c':'3'},
{'a':'1','b':'2','c':'3'},
{'a':'1','b':'2','c':'3'},
{'a':'1','b':'2','c':'3'},
{'a':'1','b':'2','c':'3'}
]
}
[解决办法]
晕死，我的是Ext2.1你那是start传参有错误，看看源码吧。
[解决办法]
<link rel="stylesheet" type="text/css" href="ext/ext-4.0.0-gpl/ext-4.0.0/resources/css/ext-all.css" /> <script type="text/javascript" src="ext/ext-4.0.0-gpl/ext-4.0.0/bootstrap.js"></script> <link rel="stylesheet" type="text/css" href="ext/ext-4.0.0-gpl/ext-4.0.0/examples/shared/example.css" /> <title>无标题文档</title><script> Ext.Loader.setConfig({enabled: true});Ext.Loader.setPath('Ext.ux', 'ext/ext-4.0.0-gpl/ext-4.0.0/examples/ux/');Ext.require([ 'Ext.data.*', 'Ext.grid.*', 'Ext.util.*', 'Ext.ux.data.PagingMemoryProxy', 'Ext.ux.ProgressBarPager', 'Ext.state.*']);Ext.onReady(function(){ var sm = Ext.create('Ext.selection.CheckboxModel'); var myData = { 'items': [ { customerNum: '1001', name: '王威', sex: 1, mobile: '15021306251' }, { customerNum: '1002', name: '小华', sex: 0, mobile: '15021306623' }, { customerNum: '1003', name: '小龙', sex: 1, mobile: '15021302253' } ] }; // register model Ext.define('Company', { extend: 'Ext.data.Model', idProperty: 'company', fields: [ {name: 'customerNum'}, {name: 'name'}, {name: 'sex', type: 'float'}, {name: 'mobile'} ] }); //create the data store var store = Ext.create('Ext.data.Store', { model: 'Company', remoteSort: true, pageSize: 2, proxy: { type: 'pagingmemory', data: myData, reader: { type: 'json', root:'items' } } }); // create the Grid var grid = Ext.create('Ext.grid.Panel', { //title:'客户信息', selModel: sm, store: store, columns: [{ id:'customerNum', text: '编号', sortable: true, dataIndex: 'customerNum', flex: 1 },{ id:'name', text: '姓名', sortable: true, dataIndex: 'name', width: 100 },{ id:'sex', text: '性别', sortable: true, dataIndex: 'sex', width:100 },{ id:'mobile', text: '电话', sortable: true, dataIndex: 'mobile', width:100 }], stripeRows: true, frame:true, tbar: [ { xtype: 'button', text: '新增'}, { xtype: 'button', text: '修改'}, { xtype: 'button', text: '删除'}, { xtype: 'button', text: '刷新'} ], bbar: Ext.create('Ext.PagingToolbar', { pageSize: 2, store: store, displayInfo: true // plugins: Ext.create('Ext.ux.ProgressBarPager', {}) }), renderTo: Ext.getBody() }); store.load(); });</script>
[解决办法]
做这种分页前台设置基本上不会出问题 ，主要是后台处理，看一下后台是哪里的计算是否正确