Extjs 4.2 loadMask shows after call to function and not before

Question

in a onGridPanelCellClick event I create a loadMask to show before calling the fillDisplayStore() function but the mask doesn't show until after the function has completed. What am I missing?

var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
    myMask.show();

fillDisplayStore(store, loadedStore);

I tried using chrome debugger putting a break point before the function call and it shows the mask before but in real time it doesn't show until after the function call. The reason I need a loadMask is because the function that is called takes about 10 seconds to finish. Thanks in advance for any help.

Answer 1

you can utilize setTimeout function to allow the rendering of the load mask before proceeding with your function. For example,

grid.on('cellclick', function () {
            var myMask = new Ext.LoadMask(Ext.getBody(), {
                msg: "Please wait..."
            });
            myMask.show();
            setTimeout(function () {
                // your function here
                console.log('Data loading for record: ' + record.get('name'));
                myMask.hide();
            }, 2000); 
 })