Question

我的tabpanel中有多个网格。在加载数据时，我使用grid.setLoading( true );使用加载掩码标记每个网格网格收到数据后，我使用grid.setLoading( false );

删除加载掩码

问题：DOM中的加载掩码div保留在那里。

他们为什么留在DOM？
如何安全地从DOM中删除它们？我找到了不同的类“x-mask”和“x-mask-msg”的div。我找不到网格（视图）和那些加载掩码div之间的连接。

示例div：

<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>

问题在于，displayed: none和visibility: hidden的高度和位置是活动的，导致浏览器使用滚动条作为空白区域。

Answer 1

这是我正在使用的解决此问题的方法。我用JQUERY检测窗口大小调整并将掩码宽度更新为0.再次调用掩码时，它会相应地重置它的宽度。

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

现代浏览器的Javascript示例。 getElementsByClassName在IE8或更低版本中不起作用。

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

Answer 2

我正在转向4.2.1并遇到同样的问题。使用autoLoad的简单网格。掩码是隐藏的（但保留在DOM中）。在这一点上没有任何错误，浏览器（铬）滚动不会出现。但是只要调整浏览器窗口大小，就会出现问题。看起来像隐藏的遮罩层没有得到适当的事件来调整它的大小（如果它必须在DOM中）。

我想这不容易发现。我偶然发现了这个问题。

默认网格掩码停留在DOM中导致问题，因为它使用隐藏模式“visibility”...应该使用“display”。

在setLoading之后LoadMasks保留在DOM中（false）

2 个答案: