ExtJS4.07 分页组件pagingtoolbar

ExtJS4.07 分页组件

先看例子：

var itemsPerPage = 2;   // set the number of items you want per pagevar 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 paramsstore.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,