ExtJs的Desktop里面碰到一个问题。在一个models里面创建一个子窗口,然后在子窗口遮罩后面所有窗口。
1.发现问题:无法有时候无法遮罩后面父窗口。
2.原因:在Chrome查看dom后发现“ext-el-mask”元素的"z-index"属性的值并不对应不被遮罩的窗口(也就是弹出的子窗口)的"z-index"属性的值。
3.解决办法:所以后面我在window渲染完成后把“ext-el-mask”的z-index"改成子窗口的"z-index"的值。接着便成功遮罩住了父窗口。
var zIndex=document.getElementById('addWindow').style.getPropertyValue('z-index');
var extElMasks=document.body.getElementsByClassName('ext-el-mask');
var length = extElMasks.length;
for(var i =0 ; i<length;i++){
extElMasks[i].style.setProperty('z-index',zIndex);
}
4.发现问题:当这个子窗口在执行load()方法时,遮罩失效。
5.原因:load()方法使用了异步加载,所以当窗口渲染完成后,异步加载未完成时,改变子窗口的"z-index"的值并不会有任何作用。因为在load()方法执行完成后,窗户会重新render一次,而窗口"z-index"的值也会被重分配一次。
6.解决办法:所以,必须同时在窗口监听load事件,执行遮罩。
7.发现问题:当打开多个Models时候,遮罩层失效,弹出窗口会被放置到最后。
8.原因:查明中....
最后给个最简单的解决办法,详见:传送门