Extjs 工具提示、IFrame 和 IE => 问题答案

【问题标题】：Extjs Tooltips, IFrames and IE => ProblemsExtjs 工具提示、IFrame 和 IE => 问题
【发布时间】：2010-06-09 15:25:25
【问题描述】：

我有一个使用OpenLayers、Extjs 和GeoExt 的应用程序。我的应用程序运行良好，但我需要将它放在另一个页面的 IFrame 中。执行此操作时，我的工具栏在 Internet Explorer 中变得无响应。

原因是 Ext.QuickTips.init();。注释掉这一行，一切正常 - 除了快速提示 of course =)

但为什么会引起问题？是因为我用错了，放错了，还是因为它不喜欢Internet Explorer和IFrames？

链接：

Link to the IFrame page

IFrame 页面：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <body>
        <iframe height="660" src="http://www.gis34.dk/doctype.html" width="660">
          <p>This browser does not support <i>frames</i>.</p>
        </iframe>
    </body>
</html>

应用程序页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" language="javascript">
        var map;
        var mapPanel;
        var mainViewport;
        var toolbarItems = [];
    </script>
    <link href="/Libraries/Ext/resources/css/ext-all.css" type="text/css"
    rel="stylesheet" />
    <link href="/Libraries/GeoExt/resources/css/geoext-all-debug.css" type="text/css"
    rel="stylesheet" />
    <link href="/CSS/Extjs.css" type="text/css" rel="stylesheet" />
    <link href="/CSS/OpenLayers.css" type="text/css" rel="stylesheet" />
    <link href="/CSS/Poseidon.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <script src="/Libraries/OpenLayers/OpenLayers.js" type="text/javascript"></script>
    <script src="/Libraries/Ext/adapter/ext/ext-base-debug.js" type="text/javascript"></script>
    <script src="/Libraries/Ext/ext-all-debug.js" type="text/javascript"></script>
    <script src="/Libraries/GeoExt/lib/GeoExt.js" type="text/javascript"></script>
    <script src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"
    type="text/javascript"></script>
    <div id="map">
    </div>
    <script type="text/javascript">
        Ext.onReady(function() {
            Ext.QuickTips.init(); // Uncomment this line!

            Ext.BLANK_IMAGE_URL = '/Libraries/Ext/resources/images/default/s.gif';

            var layer = new OpenLayers.Layer.OSM.Mapnik('OpenStreetMap Mapnik', {
                sphericalMercator: true
            }, {
                isBaseLayer: true
            });

            var mapOptions = {
                projection: 'EPSG:900913',
                units: 'm',
                maxExtent: new OpenLayers.Bounds(1390414.0280576, 7490505.7050394, 1406198.2743956, 7501990.3685372),
                minResolution: '0.125',
                maxResolution: '1000',
                restrictedExtent: new OpenLayers.Bounds(1390414.0280576, 7490505.7050394, 1406198.2743956, 7501990.3685372),
                controls: [
                    ]
            };
            map = new OpenLayers.Map('', mapOptions);

            var Navigation = new OpenLayers.Control.Navigation();
            action = new GeoExt.Action({
                control: new OpenLayers.Control.ZoomBox({
                    out: false
                }),
                map: map,
                tooltip: "Zoom in",
                iconCls: 'icon-zoom-in',
                toggleGroup: 'mapTools',
                group: 'mapTools'
            });
            toolbarItems.push(action);
            action = new GeoExt.Action({
                control: new OpenLayers.Control.ZoomBox({
                    out: true
                }),
                map: map,
                tooltip: "Zoom out",
                iconCls: 'icon-zoom-out',
                toggleGroup: 'mapTools',
                group: 'mapTools'
            });
            toolbarItems.push(action);

            action = new GeoExt.Action({
                control: new OpenLayers.Control.ZoomToMaxExtent(),
                map: map,
                iconCls: 'icon-zoom-max-extent',
                tooltip: 'Zoom helt ud'
            });
            toolbarItems.push(action);
            map.addControl(Navigation);
            map.addLayer(layer);

            mapPanel = new GeoExt.MapPanel({
                border: true,
                id: 'mapPanel',
                region: "center",
                map: map,
                tbar: toolbarItems
            });
            mainViewport = new Ext.Viewport({
                layout: "fit",
                hideBorders: true,
                items: {
                    layout: "border",
                    deferredRender: false,
                    items: [
                        mapPanel
                        ]
                }
            });
        });
    </script>
</body>
</html>

【问题讨论】：

标签： internet-explorer iframe extjs openlayers

【解决方案1】：

我遇到过类似的问题，IE 在 iframe 中的行为很奇怪。

问题似乎与元素的取消屏蔽有关。

快速提示在文档的 mousedown 时被拖放管理器禁用，然后在 mouseup 时启用。在启用时，它会取消屏蔽元素并尝试删除一个类，这似乎是导致它的原因。老实说，我不知道为什么。

无论如何，在 unmask() 方法中，尝试修改代码，使其仅在现有掩码已存在时才调用 removeClass。

unmask : function(){ var me = this, dom = me.dom, mask = data(dom, 'mask'), maskMsg = data(dom, 'maskMsg'), hasMask;

if(mask){
    if(maskMsg){
        maskMsg.remove();
            data(dom, 'maskMsg', undefined);
    }
    mask.remove();
        data(dom, 'mask', undefined);
        hasMask = true;
}
if(hasMask){
        me.removeClass([XMASKED, XMASKEDRELATIVE]);
    }
}

【讨论】：

好吧，我真的不知道该寻找什么。没有错误发生，而且我对 ExtJS 的经验并不多，不知道它在这个级别应该如何表现。你能告诉我在哪里看吗？这是 IE 中的问题还是 ExtJS 不够灵活，无法支持 IE 和 IFrame？换句话说，这是我必须找到解决方法并在未来的 ExtJS 版本中维护的东西，还是应该从 ExtJS 通常实现的东西？
是的，它已在 SVN 中修复。它与 ExtJS 无关，它是 IE 中的一些古怪错误。更新了答案。
感谢您的回答。我已在 ext-all-debug.js 中插入了您建议的代码，替换了旧代码。该链接现在指向我修改后的 ext-all-debug.js 文件，但它仍然不起作用。它不仅仅是您发布的代码吗？这个问题在 IE7 和 IE8 中都有。我还没有访问 SVN，但是一旦我的老板说去购买许可证，这应该会改变 :)