ExtJS 4 grid and some problems with mask

Question

I have a not too big grid (30x20) with numbers in cells. I have to display all, calculate them in different ways (by columns, rows, some cells, etc.) and write values to some cells. This data is also written and read from db table fields. Everything is working, excluding simple (theoretically) mask tools. In time of e.g. writing data to the field in the table I try to start mask and close it on finish. I used such a “masks” very often but only in this situation I have a problem and can’t solve it. I prepare this mask the following way:

msk = new Ext.LoadMask(Ext.getBody(), { msg: "data loading ..." });
msk.show();

[writing data loops]

msk.hide();
msk.destroy();

I also tried to use grid obiect in place of Ext.getBody(), but without result. I found also that the program behaves in a special way – loops which I use to write data to the table field are "omitted" by this mask, and it looks like loops are working in the background (asynchronously).

Would you be so kind as to suggest something?

No, no, no, sorry guys but my description isn’t very precise. It isn’t problem of loading or writing data to the database. Let’s say stores are in the memory but my problem is to calculate something and write into the grid. Just to see this values on the screen. Let me use my example once again:

msk = new Ext.LoadMask(Ext.getBody(), { msg: "data loading ..." });
msk.show();

Ext.each(dataX.getRange(), function (X)  {
    Ext.each(dataY.getRange(), function (Y)  {
        …
        X.set('aaa', 10);
    …
}

msk.hide();
msk.destroy();

And in such a situation this mask isn’t visible or is too fast to see it.

In the mean time I find (I think) a good description of my problem but still can’t find a solution for me. When I use e.g. alert() function I see this mask, when I use delay anyway, mask is too fast. Explanation is the following:

The reason for that is quite simple - JS is single threaded. If you modify DOM (for example by turning mask on) the actual change is made immediately after current execution path is finished. Because you turn mask on in beginning of some time-consuming task, browser waits with DOM changes until it finishes. Because you turn mask off at the end of method, it might not show at all. Solution is simple - invoke store rebuild after some delay.*

If operation is very simple and doesnt take too long you wont see any mask. — Paweł Głowacz

Paweł Głowacz Paweł Głowacz · Accepted Answer · 2015-07-24T10:18:02

I have no idea how is your code looks in general but this is some tip that you could actually use.

First of all loading operations are asynchronously so you need to make that mask show and then somehow destroy when data are loaded.

First of all check if in your store configuration you have autoLoad: false If yes then we can make next step:

Since Extjs is strongly about MVC design pattern you should have your controller somewhere in your project.

I suppose you are loading your data on afterrender or on button click event so we can make this:

In function for example loadImportantData

loadImportantData: function(){
    var controller = this;
    var store = controller.getStore('YourStore'); //or Ext.getStore('YourStore'); depends on your configuration in controller
    var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
    myMask.show();
    store.load({
        callback: function (records, operation, success) {
            //this callback is fired when your store load all data.
            //then hide mask.
            myMask.hide();
        }
    });
}

When data is loaded your mask will disappear.

ExtJS 4 grid and some problems with mask

2 Answers