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

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.

Extending the Ext.toolbar.Paging class

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

Creating the Ext.ux.basePagingTbar.js class

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

Ext.define('Ext.ux.basePagingTbar', {
    extend: 'Ext.toolbar.Paging',
    alias: 'widget.basePagingTbar',
    alternateClassName: [
        'basePagingTbar'
    ],
    requires: [
        'Ext.toolbar.Paging'
    ],
    /**
     * @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) {
                        tbar.down('#refresh').hide();
                    }
                }
            }
        });

        me.callParent();

        // 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)) {
                        c.setHandler(value);
                    }
                }
            });
        }
    }
});

Using the Ext.ux.basePagingTbar class

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

requires: [
   ...
   'Ext.ux.basePagingTbar'
]

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.