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 IE 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>Din browser understøtter ikke <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/lib/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();
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 ind",
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 ud",
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>
