Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      Container
        Toolbar
          PagingToolbar

Class Ext.PagingToolbar

Package:Ext
Defined In:PagingToolbar.js
Class:PagingToolbar
Extends:Toolbar
xtype:paging

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 approprate data.

Ext.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.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,
    bbar: new Ext.PagingToolbar({
        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:

Config Options

Config OptionsDefined By
 allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
 beforePageText : String
The text displayed before the input item (defaults to 'Page').
PagingToolbar
 bubbleEvents : Array

An array of events that, when fired, should be bubbled to any parent container. Defaults to ['add', 'remove'].

Container
 disabled : Boolean
Render this component disabled (default is false).
Component
 disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
 displayInfo : Boolean
true to display the displayMsg (defaults to false)
PagingToolbar
 emptyMsg : String
The message to display when no records are found (defaults to 'No data to display')
PagingToolbar
 hidden : Boolean
Render this component hidden (default is false). If true, the hide method will be called internally.
Component
 pageSize : Number
The number of records to display per page (defaults to 20)
PagingToolbar
 pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
 pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
 prependButtons : Boolean
true to insert any configured items before the paging buttons. Defaults to false.
PagingToolbar
 resizeEvent : String
The event to listen to for resizing in layouts. Defaults to 'resize'.
Container
 store : Ext.data.Store
The Ext.data.Store the paging toolbar should use as its data source (required).
PagingToolbar
 x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
 y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

PropertyDefined By
 disabled : Boolean
True if this component is disabled. Read-only.
Component
 hidden : Boolean
True if this component is hidden. Read-only.
Component
 initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
 items : MixedCollection
The collection of components in this container as a Ext.util.MixedCollection
Container
 pageSize : Number
The number of records to display per page. See also cursor.
PagingToolbar
 rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

MethodDefined By

Public Events

EventDefined By