CODEWITHSUNDEEP
extjsextjs4.2
Shlomo
Shlomo

Reputation: 3990

LoadMasks stay in DOM after setLoading( false )

There are multiple grids in my tabpanel. While the data is loading, I mark each grid with a load mask using grid.setLoading( true ); After a grid has received its data, I remove the load mask using grid.setLoading( false );

Problem: the load mask divs in the DOM stay there.

  1. Why do they stay in DOM?
  2. How can I remove them from DOM safely? I have found different divs of classes "x-mask" and "x-mask-msg". I cannot find the connection between grid (view) and those load mask divs.

Example divs:

<div class="x-mask" style="z-index: 19001; width: 851px; 
height: 319px; right: auto; left: 279px; top: 1472px; 
visibility: hidden;" id="ext-gen1575"></div>

<div class="x-mask-msg x-layer x-mask-msg-default x-border-box" 
id="loadmask-1240" style="right: auto; left: 651px; top: 1616px; 
z-index: 19003; display: none;">
<div id="loadmask-1240-msgEl" class=" x-mask-msg-inner">
<div id="loadmask-1240-msgTextEl" class="x-mask-msg-text">Loading data...</div>
</div>
</div>

The problem is that altough they are displayed: none and visibility: hidden their height and position is active, causing the browser to use scrollbars for the empty space.

Upvotes: 1

Views: 1060

Answers (2)

Alan Bullpitt
Alan Bullpitt

Reputation: 456

This is the work around I am using for this issue. I detect a window resize with JQUERY and update the mask width to 0. When the mask is called again it resets it's width accordingly.

$(window).resize(function () { $('.x-mask').width(0); });

Javascript example for modern browsers. getElementsByClassName doesn't work in IE8 or less.

window.onresize = function(){
    var masks = document.getElementsByClassName('x-mask');
    for(i=0; i<masks.length; i++) {
      masks[i].style.width = '0';
    }   
}

Upvotes: 1

hpet
hpet

Reputation: 299

I am moving to 4.2.1 and experiencing the same issue. Simple grid with autoLoad. Mask is hidden (but stays in DOM). At this point nothing apears to be wrong and browser (chrome) scrolling doesn't appear. But as soon as browser window is resized, problem appears. Seems like hidden mask layer is not getting proper events to adjust its size (if it must be in DOM anyway).

I guess this is not easy to spot. I found this problem by accident.

Default grid mask stays in DOM causing issues because its it is using hidden mode "visibility"... should use "display".

Upvotes: 0

Related Questions