Всплывающие подсказки Extjs, IFrames и IE => Проблемы - PullRequest
Новая
       13

Всплывающие подсказки Extjs, IFrames и IE => Проблемы

2 голосов
/ 09 июня 2010

У меня есть приложение, использующее OpenLayers, Extjs и GeoExt.Мое приложение работает нормально, но мне нужно, чтобы оно было помещено в IFrame на другой странице.При этом моя панель инструментов перестает отвечать на запросы в Internet Explorer .

Причина: Ext.QuickTips.init (); .Закомментируйте эту строку, и все отлично работает - кроме кратких советов конечно =)

Но почему это вызывает проблемы?Это потому, что я использую его неправильно, неправильно его размещаю или просто потому, что ему не нравятся Internet Explorer и IFrames?

Ссылка :

Ссылка на страницу IFrame

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>

Страница приложения 1033 *: 

<!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>

1 Ответ

2 голосов
/ 10 июня 2010

Я сталкивался с подобной проблемой, IE ведет себя странно в iframe.

Кажется, проблема связана с демаскировкой элементов.

Быстрые подсказки отключаются при копировании документаменеджер перетаскивания, затем включается при наведении мыши.При включении он демаскирует элемент и пытается удалить класс, который, кажется, вызывает его.Честно говоря, я не знаю, почему.

В любом случае, в методе unmask () попробуйте изменить код, чтобы он вызывал removeClass, только если существующая маска уже была там.

unmask : function(){ var me = this, dom = me.dom, mask = data(dom, 'mask'), maskMsg = data(dom, 'maskMsg'), hasMask;</p> <pre><code>if(mask){ if(maskMsg){ maskMsg.remove(); data(dom, 'maskMsg', undefined); } mask.remove(); data(dom, 'mask', undefined); hasMask = true; } if(hasMask){ me.removeClass([XMASKED, XMASKEDRELATIVE]); } }

...