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. 本人博客没啥人气, 希望得到帮助的童鞋能帮忙顶一下, 大家互相学习!
