ExtJS4.07 分页组件pagingtoolbar

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,