ExtJS4 Grid Panel Paging Bar - reload button spinner animation?

Question

in ExtJS 3.x grid panels that used a remote datastore and paging bars had a reload button that would change to a spinner animation while reloading data from the store. However in ExtJS4 the reload button now does not seem to do that, in either sencha.com's examples or for my own application's grids. Was this functionality removed, or does it have to be enabled somehow?

Answer 1

Here's a workaround that I came up with and will be using, hopefully just temporarily:

Add the following rule to your CSS to use ast he spinner's iconCls (couldn't find it in Ext's stylesheet) :

.x-reset .x-tbar-wait { background-image: url(../ext4/resources/themes/images/gray/grid/loading.gif);}

You might have to modify the image url path depending on where your css file resides relative to your ext directory.

Then add a listener to grid store's "beforeload" and "load" events:

store.on("beforeload", function() {
    //get the refresh button component in the grid's paging bar(s) and set its iconCls to the spinner icon
    //the string you pass to getDockedComponent might be different depending on the itemId you give to your paging bars in your grid's dockedItems config
    grid_panel.getDockedComponent("bottom_paging").getComponent("refresh").setIconCls("x-tbar-wait");
    grid_panel.getDockedComponent("top_paging").getComponent("refresh").setIconCls("x-tbar-wait");
});

store.on("load", function() {
    //get the refresh button component in the grid's paging bar(s) and set its iconCls back to the default icon
    grid_panel.getDockedComponent("bottom_paging").getComponent("refresh").setIconCls("x-tbar-loading");
    grid_panel.getDockedComponent("top_paging").getComponent("refresh").setIconCls("x-tbar-loading");
});

Answer 2

Rewrote my fix as a grid panel plugin to make it a bit cleaner and more modular:

Ext.define('Cls.grid.plugin.PagingRefreshSpinner', {
    alias: 'plugin.pagingrefreshspinner',
    extend: 'Ext.AbstractPlugin',
    pluginId: 'pagingRefreshSpinner',

    init: function(grid) {
        var docked = grid.getDockedItems('pagingtoolbar'),
            btns = [],
            setIcon = function(buttons, cls)
            {
                Ext.each(buttons, function(b){
                    if(Ext.isFunction(b.setIconCls)) b.setIconCls(cls);
                });
            };

        Ext.each(docked, function(cmp) {
            var btn = cmp.getComponent('refresh');
            if(btn) btns.push(btn);
        });

        if(btns.length < 1) return;
        grid.getStore().on('beforeload', function() {
            setIcon(btns, 'x-tbar-wait');
        });
        grid.getStore().on('load', function() {
            setIcon(btns, 'x-tbar-loading');
        });
    }
});

In your grid config just add {ptype: 'pagingrefreshspinner'} to its plugins array. And just like i mentioned in my previous answer, dont' forget to add this rule to your CSS:

.x-reset .x-tbar-wait { 
    background-image: url(ext4_dir/resources/themes/images/gray/grid/loading.gif);
}