ExtJs:Desktop的Window层叠遮罩问题

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.原因:查明中....


最后给个最简单的解决办法,详见:传送门

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值