title: ExtJS 4 grid and some problems with mask
body: <p>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:</p>
  
  <pre><code>msk = new Ext.LoadMask(Ext.getBody(), { msg: "data loading ..." });
  msk.show();
  
  [writing data loops]
  
  msk.hide();
  msk.destroy();
  </code></pre>
  
  <p>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).</p>
  
  <p>Would you be so kind as to suggest something?</p>
  
  <p>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:</p>
  
  <pre><code>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();
  </code></pre>
  
  <p>And in such a situation this mask isn’t visible or is too fast to see it.</p>
  
  <p>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:</p>
  
  <p><em>The reason for that is quite simple - JS is single threaded</em>. 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.*</p>