Ext.window把mask加到父窗口上

Extjs 3.3.1

有这样一个场景: 页面A 有一个iframe, 这个iframe 的src 是页面B.

|------------------- |

|      页面A           |

| __________    |

| |  iframe       |   |

| |  页面B         |   |

| ----------------    |

---------------------

页面B 有段js脚本, 作用是弹出一个Ext.window, 这里称为winB, 一般是

 

var winB = new Ext.Window({

            ...............//属性设置

            renderTo: Ext.getBody(), //这个自己查就知道了

            modal:true, //遮罩层, 其实就是启用一个mask(马赛克, 万恶的马赛克)

            ..............................

});

winB.show();

 

这段js 脚本执行后, 效果出现了: 在iframe 里面出了一个模式窗口, 并且这个窗口下面有个遮罩层, 把iframe 罩住了.

 

---

 

 

这个很简单的, 但是现在有个问题出现了, 我要连页面A 也罩住.

刚开始的想法是: 调用一个mask 罩住页面A, 在适当的时候取消这个 mask.

 

parent.getBody().mask();

parent.getBody().unmask();

 

需要的效果达到了, 确实可以罩住页面A, 但是连 winB 也给罩住了, 这可不是我所希望的, 尝试了一些方法, 试着把 winB 搞到mask 罩前面, 都失败了.

 

---

网上查了一下, 可以用 parent.Ext.Window, 原来的js 脚本改一下.

 

var winB = new parent.Ext.Window({

            ...............//属性设置

            renderTo:parent.Ext.getBody(), //这个自己查就知道了

            modal:true, //遮罩层, 其实就是启用一个mask(马赛克, 万恶的马赛克)

            ..............................

});

winB.show();

 

还真的搞定了.

我们的js 脚本是在页面B 上的, 页面B 的 parent 就是 页面A 的window 了.

这里就可以知道了, 现在的 winB 是页面A 的模式窗口对象了, 所以这里还有一个要求, 页面A 必须加入 Extjs 3.3.1 必要的库

    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../../ext-all.js"></script>

 

还有一点要注意的, 如果js 脚本中有 applyTo: 'hello-tabs' (hello-tabs 是一个div 的id) 之类的代码, 请修改一下,

 

如 var helloTabs = Ext.get('hello-tabs');   

    再把 applyTo: 'hello-tabs' 改为 applyTo:helloTabs;

 

如果不修改, 在IE6(其他IE版本不清楚) 下, 会报"参数错误" 的异常信息, 估计是IE6 把作用域混淆了.

在FireFox 4(其他版本没测试) 下就没问题, 网景为什么当年输给微软, 唉!!!

 

---

 

 

从以前到现在, 刚好用了Extjs 4天, 所以很多都不懂, 可能有更好的解决方法是我所不知道的.

ps. 本人博客没啥人气, 希望得到帮助的童鞋能帮忙顶一下, 大家互相学习!