Ext.toolbar.PagingToolbar

As the amount of records increases, the time required for the browser to render them increases. Paging is used to reduce the amount of data exchanged with the client. Note: if there are more records/rows than can be viewed in the available screen area, vertical scrollbars will be added.

Paging is typically handled on the server side (see exception below). The client sends parameters to the server side, which the server needs to interpret and then respond with the appropriate data.

Ext.toolbar.PagingToolbar is a specialized toolbar that is bound to a Ext.data.Store and provides automatic paging control. This Component loads blocks of data into the store by passing paramNames used for paging criteria.

PagingToolbar is typically used as one of the Grid's toolbars:

Ext.tip.QuickTips.init(); // to display button quicktips

var myStore = new Ext.data.Store({
    reader: new Ext.data.JsonReader({
        totalProperty: 'results', 
        ...
    }),
    ...
});

var myPageSize = 25;  // server script should only send back 25 items at a time

var grid = new Ext.grid.GridPanel({
    ...
    store: myStore,
    dockedItems: [
        new Ext.toolbar.PagingToolbar({
            dock: 'bottom',
            {@link #store: myStore,       // grid and PagingToolbar using same store
            displayInfo: true,
            pageSize: myPageSize,
            prependButtons: true,
            items: [
                'text 1'
            ]
        });
    ]
});

To use paging, pass the paging requirements to the server when the store is first loaded.

store.load({
    params: {
        // specify params for the first page load if using paging
        start: 0,          
        limit: myPageSize,
        // other params
        foo:   'bar'
    }
});

If using store's autoLoad configuration:

var myStore = new Ext.data.Store({
    autoLoad: {params:{start: 0, limit: 25}},
    ...
});

The packet sent back from the server would have this form:

{
    "success": true,
    "results": 2000, 
    "rows": [ // *Note: this must be an Array 
        { "id":  1, "name": "Bill", "occupation": "Gardener" },
        { "id":  2, "name":  "Ben", "occupation": "Horticulturalist" },
        ...
        { "id": 25, "name":  "Sue", "occupation": "Botanist" }
    ]
}

Paging with Local Data

Paging can also be accomplished with local data using extensions:

{start: 'start', limit: 'limit'}