v7.3.0

PagingToolbar
Widget

A toolbar for navigating through pages of a Store that has been configured to be paged. It provides first/previous/next/last page buttons, a page number input, a page count label, a reload button, and a data summary — all of which can be customized or extended via the items config. Typically used as a bottom bar (bbar) on a Grid.

new Grid({
    bbar : {
        type : 'pagingtoolbar'
    }
});

Useful configs and properties

Config Description
store The paged store to control
items Customize or extend the default toolbar buttons

See also

  • Toolbar - Base toolbar class
  • AjaxStore - Remote store that supports paging via pageSize config

Default toolbar items

The toolbar provides some default buttons and other items as described below:

Reference Weight Description
firstPageButton 100 Go to first page
previousPageButton 110 Go to previous page
pageNumber 120 TextCurrent page number
pageCount 130 Label showing number of pages
nextPageButton 140 Go to next page
lastPageButton 150 Go to last page
reloadButton 160 Reload data
dataSummary 170 Summary text

Customizing the toolbar items

The toolbar items can be customized, existing items can be changed or removed, and new items can be added. This is handled using the items config.

Adding additional buttons or widgets to the paging toolbar can be done like so:

bbar : {
    type  : 'pagingtoolbar',
    items : {
        click : {
            type : 'button',
            text : 'Click me',
            weight : 175 // Add after last item
        }
    }
}
No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class
  • store : Store/String

    The Store that this PagingToolbar is to control. If set to a string value, that string value should represent the property name of the Store's reference on this toolbar's parent component. By default, the toolbar will control the Store found at the parent components 'store' property.

Properties

Properties are getters/setters or publicly accessible variables on this class
type: pagingtoolbar

Source path

Core/widget/PagingToolbar.js

Demo

examples/paged

Contents