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