ExtJS 4 Temporarily disable loading mask appearance for a grid

Question

I have a grid and I want to disable appearance of loading mask on it (to prevent double loading mask because I add loading mask to its parent component) at the the execution of certain scripts.

I've tried something like this

var myGridView = myGrid.getView();

myGridView.loadMask = false;

// I want so at this data loding did not appear loading mask
myGrid.getStore().load();

myGridView.loadMask = true;

but it doesnt work.

Any suggestions?

Answer 1

After carefully reading source code of grid, load mask and store I can suggest this small override

Ext.override(Ext.grid.Panel, {
    setLoading: function (load) {
        var me = this,
            view = me.getView(),
            store = me.getStore();

        me.callParent(arguments);

        if (Ext.isBoolean(load) && view && view.loadMask && view.loadMask.isLoadMask && store) {
            if (load) {
                view.loadMask.bindStore && view.loadMask.bindStore(store);
            } else {
                view.loadMask.unbindStoreListeners(store);
            }
        }
    }
});

This sounds crazy, but spinner knows about grid's store. And even has (protected) methods to work with http://docs.sencha.com/extjs/5.1.1/Ext.LoadMask.html#method-unbindStoreListeners

http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.LoadMask-method-unbindStoreListeners

Answer 2

You can use setDisabled() method for LoadMask instance:

var myGridView = myGrid.getView();
myGridView.loadMask.setDisabled(true);
myGrid.getStore().load(function () {
   myGridView.loadMask.setDisabled(false);
});

As well you can use enable(), disable() methods.