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

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