Loading delay extjs

Question

I have a panel within which I have two more panels. When you click on panel1 then information in panel2 is loaded. Since the information is quite huge there is some delay when its being loaded. During this interim period I wish to add a loading mask which intimates the user that its getting loaded.

For the same I have done this:

var myMask = new Ext.LoadMask(Ext.getCmp('eventsPanel'), {
        msg:"Please wait..."
});
myMask.show(); 
// eventsPanel is the main panel under which panel1 and panel2 lie.
// This code is in the selectionchange listener of panel1 whose code
// is inside the main eventsPanel code.

However, nothing is being displayed on the screen. Its still the same, i.e., for some amount of time the screen freezes and then after a delay of like 2-3 seconds the information is loaded. Can you please advise as to where am I going wrong?

Answer 1

I would suggest you to first show your masking like the way you are doing:

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

Then make a delayed task

var task = new Ext.util.DelayedTask(function(){
    //your loading panel2 with heavy data goes here
    myMask.hide();
});
//start the task after 500 miliseconds
task.delay(500);

This should solve your problem.

Answer 2

I make a custom mask as follows:

var componentToMasK = Ext.ComponentQuery.query('#myChildComponent')[0];
var customMask = Ext.get(componentToMasK.getEl()).mask('My mask text...');

var task = new Ext.util.DelayedTask(function() {

    customMask.fadeOut({
        duration : 500,
        remove:true
    });

});

task.delay(1000);

Normally when a event is triggered in a first component, caused, for example, the loading of a grid in the second component, the mask appears in both components in order to avoid user errors by clicking on the first component as the second component is loading the grid or is loading the mask.

In this case:

var componentToMasK = Ext.ComponentQuery.query('#myParentComponent')[0]; //HBox, BBox layout, tab, etc. with the two child components

Hope this helps!

Edit: 10-06-2015

The 'duration:500' and the 'delay(1000)' is only to illustrate. You can adjust these values to the needs of each component that you apply a mask.

If you remove the mask abruptly the user can not even see loading the message, that's why I use fadeOut.

Thus, you can apply a mask on virtually any component such as, for example, a fieldset, when you add it fields dynamically.

task -> http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.util.DelayedTask

Ex.get -> http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext-method-get

fadeOut - > http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.dom.Element-method-fadeOut

You can also do the following:

var task = new Ext.util.DelayedTask(function() {
   Ext.getBody().unmask();
});
task.delay(1000);

You can read more about this technique in the book: Mastering Ext JS - Second Edition (Loiane Groner)

Edit: 10-06-2015

One more detail: If we apply one mask on a Hbox layout, containing as one of the childs a grid, we have two mask: HBOX mask and grid mask. In these cases, I turn off dynamically the grid mask:

var grid =  Ext.ComponentQuery.query('#griditemId')[0];
if(grid){
     grid.getView().setLoading(false);
}

Hope this helps.