ExtJS4.07 分页组件
先看例子:
var itemsPerPage = 2; // set the number of items you want per page
var store = Ext.create('Ext.data.Store', {
id:'simpsonsStore',
autoLoad: false,
fields:['name', 'email', 'phone'],
pageSize: itemsPerPage, // items per page
proxy: {
type: 'ajax',
url: 'pagingstore.js', // url that will load data with respect to start and limit params
reader: {
type: 'json',
root: 'items',
totalProperty: 'total'
}
}
});
// specify segment of data you want to load using params
store.load({
params:{
start:0,
limit: itemsPerPage
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
],
width: 400,
height: 125,
dockedItems: [{
xtype: 'pagingtoolbar',
store: store, // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
renderTo: Ext.getBody()
});
官方的例子,可以看出pagingtoolbar配合grid使用,与grid绑定的是同一个store数据集合。
pagingtoolbar 有限制不能够很好的实现前端分页,虽然有这样的代理,难满足类似于一次性查询500条数据,然后前端分成10页,这样的需求(当然有人说查询出来,存到某个数组,再分页,这种另当别论)。因为grid绑定的是同一个grid 最好的应用场景,每次获取当前页数据展示。
pagingtoolbar传给后台参数:
pagingtoolbar参数无须用户自己重新定义,但需要用户根据自己的需求定义pageSize的值。
pageSize = 25;
page: me.currentPage, start: (me.currentPage - 1) * me.pageSize, limit: me.pageSize,