Clear Up
SharpKit Reference

Paging Class

As the number 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.Paging 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 parameters used for paging criteria.

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

  
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()
            });
            

To use paging, you need to set a pageSize configuration on the Store, and 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 = Ext.create('Ext.data.Store', {
            autoLoad: {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:

  • Ext.ux.data.PagingStore
  • Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)

Namespace: Ext.toolbar

Constructors

Fields

Name Description
afterPageText Customizable piece of the default paging text. Note that this string is formatted using {0} as a token that is replaced by the number of total pages. This token should be preserved when overriding this string if showing the total page count is desired. Defaults to: "of {0}"
beforePageText The text displayed before the input item. Defaults to: "Page"
displayInfo true to display the displayMsg Defaults to: false
displayMsg The paging status message to display. Note that this string is formatted using the braced numbers {0}-{2} as tokens that are replaced by the values for start, end and total respectively. These tokens should be preserved when overriding this string if showing those values is desired. Defaults to: "Displaying {0} - {1} of {2}"
emptyMsg The message to display when no records are found. Defaults to: "No data to display"
firstText The quicktip text displayed for the first page button. Note: quick tips must be initialized for the quicktip to show. Defaults to: "First Page"
inputItemWidth The width in pixels of the input field used to display and change the current page number. Defaults to: 30
lastText The quicktip text displayed for the last page button. Note: quick tips must be initialized for the quicktip to show. Defaults to: "Last Page"
nextText The quicktip text displayed for the next page button. Note: quick tips must be initialized for the quicktip to show. Defaults to: "Next Page"
prependButtons true to insert any configured items before the paging buttons. Defaults to: false
prevText The quicktip text displayed for the previous page button. Note: quick tips must be initialized for the quicktip to show. Defaults to: "Previous Page"
refreshText The quicktip text displayed for the Refresh button. Note: quick tips must be initialized for the quicktip to show. Defaults to: "Refresh"
store The Ext.data.Store the paging toolbar should use as its data source.

Methods

Name Description
bind(Store) Binds the paging toolbar to the specified Ext.data.Store (deprecated)
bindStore(object, object) Binds a store to this instance.
bindStoreListeners(AbstractStore) Binds listeners for this component to the store. By default it will add anything bound by the getStoreListeners method, however it can be overridden in a subclass to provide any more complicated handling.
doRefresh() Refresh the current page, has the same effect as clicking the 'refresh' button.
getStore() Gets the current store instance.
getStoreListeners() Gets the listeners to bind to a new store.
moveFirst() Move to the first page, has the same effect as clicking the 'first' button.
moveLast() Move to the last page, has the same effect as clicking the 'last' button.
moveNext() Move to the next page, has the same effect as clicking the 'next' button.
movePrevious() Move to the previous page, has the same effect as clicking the 'previous' button.
onBindStore(AbstractStore, bool) Template method, it is called when a new store is bound to the current instance.
onUnbindStore(AbstractStore, bool) Template method, it is called when an existing store is unbound from the current instance.
unbind(Store) Unbinds the paging toolbar from the specified Ext.data.Store (deprecated)
unbindStoreListeners(AbstractStore) Unbinds listeners from this component to the store. By default it will remove anything bound by the bindStoreListeners method, however it can be overridden in a subclass to provide any more complicated handling.
© Copyright 2005-2011 SharpKit. All rights reserved.