Ext JS 4.0.7 Load mask not working for Grid

Question

Load mask of a grid is not working which is triggered in button handler which is in the dockedItems of the same grid. (i am using Ext JS 4.0.7)

But in console,

viewareaGrid = Ext.getCmp('mva')
viewareaGrid.setLoading(true);

above code shows the load mask perfectly in console.

Below code is the view in which i am manually filtering the users.

filterFunction() will run for atleast 4 secs.

What could be wrong ?

Ext.define('AM.view.main.user', {
    id:'mva',
    extend:'Ext.grid.Panel',
    region:'center',
    alias:'widget.mva',
    store:'user',

    dockedItems:[

                {
                    id:'filter',
                    text:'Filter',
                    xtype:'button',
                    handler:function () {
                        var viewareaGrid = Ext.getCmp('mva')
                        viewareaGrid.setLoading(true);
                        filterFunction();
                        viewareaGrid.setLoading(false);
                    }
                }]

});

newmount newmount · Accepted Answer · 2013-12-27T06:54:13

One way of doing this is to create a callBack function to hide mask and execute it inside filterFunction. Also use 'defer' to call filterFunction to give browser breathing space to render the load mask.

Fiddle here: https://fiddle.sencha.com/#fiddle/2d8

Ext JS 4.0.7 Load mask not working for Grid

1 Answers