Extjs Load Mask

Question

I have a grid that when clicked takes a few seconds to pull up my pop-up window. I would like to have a 'loading...' message displayed while the pop-up window is loading. This is what I have so far:

    onCellClick : function(view, td, eOpts ) {
    var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
    myMask.show();
    Ext.create('myapp.view.DetailWindow', {
        title : 'my title',
        width : 900,
        approachRec : record
    });
    myMask.hide();

}

Right now this works perfectly, once I click on a cell in the grid my loading box appears then goes away once my 'DetailWindow' comes up.

However, once I close my window and click on another cell (or the same one) again. No loading box appears, but my 'detail' window does. What am I doing wrong?

What do I need to do in order to have my loading box pop up every time I click on cell?

I'm using Extjs 4.2

Thanks,

Answer 1

The code you've posted does not show() the window, it just creates it. Below is some code that I've developed that "works" (I used a setTimeout to show the window after a 3 second delay, and then to hide the loading mask), but I think that to get to the heart of your problem, you are going to have to use your debugger, and see if it is displaying any errors in the console.

grid.on('cellclick', function() {
    var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
    myMask.show();
    var window = Ext.create('Ext.window.Window', {
        title: 'Hello',
        height: 200,
        width: 400
    });
    setTimeout(function() {
        window.show();
        myMask.hide();
    }, 3000);
});