ExtJS 4, extend the Ext.toolbar.paging class to change some behavior

ExtJS 4, extend the Ext.toolbar.paging class to change some behavior

In this article we extend the ExtJS 4, Ext.toolbar.paging (pagingtoolbar) class to add some useful extra functionality.

The Ext.toolbar.paging (pagingtoolbar) class is used when you require paging on an ExtJS gridpanel. But this class comes with some limitations. In this article we will extend the class to create a factory or base class for reusability.



The refresh button

One of the limitations is that by default there is no config parameter that would hide the refresh button.

Alternative handlers for the buttons

The refresh and page buttons load or refresh pages of the store that is bound with the toolbar. By default you can't influence the handlers of these buttons.

The stores load parameters

One annoyance of the paging toolbar is that it doesn't remember the store's load parameters that came with the load of the grids store.

For example when one of your calling parameters to the server is 'brand' with a value of 'Mercedes' then when you click the refresh button of the paging toolbar it will do a curl without the 'brand' value, for it used as a 'parm' and not as an 'extraParam'. The latter one is saved on the stores proxy.


The extension

Extjs 4 is higly flexible when it comes to extending components. One advice, don't override core function when it could lead to upgrade problems when updating.

When to extend?

  • when you would like to additional functionality or change behavior of a component (like the following example)
  • when you use base components frequently with the same settings, an extension could work like a presetted class*

Advantages of extending classes

The greatest advantage when extending a class or component is that it will behave like you have intented or that it will use a base class and have a ton of extra features or it is totally new component.

Disadvantages of extending classes

Could be sensitive to compatibility issues when upgrading to another version of Ext JS.

Always extend with respect to the base components and don't develop something that is already in place.

Extending the Ext.toolbar.Paging class

We are going to add the following config options to the extended class:

config type purpose
hideRefresh boolean hide the refresh button
saveParamsOnLoad boolean save the load params object into the proxy's extraParams
alternateHandlers object alternate handler function for the refresh button

Creating the Ext.ux.basePagingTbar.js class

Create a new file named Ext.ux.basePagingTbar.js in the ux folder of your application.

Make sure you add this new file in the views of the app.js of your application.

Ext.define('Ext.ux.basePagingTbar', {
    extend: 'Ext.toolbar.Paging',
    alias: 'widget.basePagingTbar',
    alternateClassName: [
    requires: [
     * @cfg {Boolean} hideRefresh
     * Hide the refresh button when true
     * Default : false
    hideRefresh: false,  
     * @cfg {Boolean} saveParamsOnLoad
     * Convert params on load to extraParams
     * Default : false
    saveParamsOnLoad: false,
     * @cfg {Object} alternateHandlers
     * Object with handler functions for first,prev,refresh,next,last
     * Sample: 
     *    alternateHandlers: {
     *         first: me.PageOne,
     *         prev: me.PagePrev,
     *         refresh: me.PageRefresh,
     *         next: me.PageNext,
     *         last: me.PageLast
     *    }
     * Default : false
    alternateHandlers: false,
    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            listeners: {
                afterrender: function(tbar) {
                    if (tbar.hideRefresh) {


        // saveParamsOnLoad just fixates the params in the extraParams, before the load
        if (me.saveParamsOnLoad) {
            var store = me.store;
            store.on('beforeload', function(store, operation) {
                var params = operation.params;
                var proxy = store.getProxy();
                Ext.iterate(params, function(item, value) {
                    proxy.extraParams[item] = value;
            }, me);

        if (Ext.isObject(me.alternateHandlers)) {
            Ext.iterate(me.alternateHandlers, function(item, value) {
                var c = me.down('#' + item);
                if (c) {
                    if (Ext.isFunction(value)) {

Using the Ext.ux.basePagingTbar class

To use this class you simply add the following to your gridpanel:

requires: [

And instead of the standard pagingtoolbar you are now using:

    xtype: 'basePagingTbar',
    dock: 'bottom',
    store: 'puthereyourstore',
    hideRefresh: true,
    saveParamsOnLoad: true,
    alternateHandlers: {
         first: me.PageOne,
         prev: me.PagePrev,
         refresh: me.PageRefresh,
         next: me.PageNext,
         last: me.PageLast
   displayInfo: true

About extending the Ext.toolbar.paging class

We have extended the Ext.toolbar.paging class. It inherits everything from that class into your new extended class.

When using the alternateHandlers (which you almost sure might not), remember that the scope is already on this according to the Ext.toolbar.paging source code.