Extjs Tooltips, IFrames and IE => Problems

StackOverflow https://stackoverflow.com/questions/3007242

Question

I have an application using OpenLayers, Extjs and GeoExt. My application runs fine, but I need it to be placed inside an IFrame in another page. When doing this, my toolbar becomes responseless in Internet Explorer.

The cause is Ext.QuickTips.init();. Comment out this line and everything works fine - except the quick tips ofcourse =)

But why is it causing problems? Is it because I'm using it wrong, placing it wrong or just because it doesn't like Internet Explorer and IFrames?

Link:

Link to the IFrame page

IFrame page:

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

Application page:

<!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>
Was it helpful?

Solution

I have come across a similar issue, IE behaves whacky in an iframe.

It seems the issue is related to unmasking of elements.

Quicktips gets disabled on mousedown of the document by the drag drop manager, then enabled on mouseup. On enable, it unmasks the element and attempts to remove a class, which seems to cause it. I honestly don't know why.

Anyway, in the unmask() method, try modifying the code so it only calls removeClass if an existing mask was already there.

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]);
    }
}

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top