[Users] Internet Explorer issues
Aidian Holder
aidianholder at gmail.com
Fri Sep 4 22:41:48 CEST 2009
Hi all,
I've got a problem with internet explorer I'm hoping someone can help me
with.
I've got a linked grid panel-feature store-vector layor set up, similar to
one of the examples on the geo-ext site, for displaying data from a GML
file. It works fine in Firefox, but is blank in internet explorer 7.
The code is below, first the obvious parts, then the whole page worth.
Any insight would be welcome; I'm pulling my hair out trying to figure this
out.
Thanks,
Aidian Holder
*
Here in the obviously relevant code, the full page code is below that:*
var fireLines = new OpenLayers.Layer.Vector("Fire Lines");
map.addLayer(fireLines);
var store = new GeoExt.data.FeatureStore({
layer: fireLines,
proxy: new GeoExt.data.ProtocolProxy({
protocol: new OpenLayers.Protocol.HTTP({
url: "gml/perimeters.xml",
format: new OpenLayers.Format.GML()
})
}),
fields: [
{name: 'FIRE_NAME', type: 'string'},
{name: 'ACRES', type: 'string'},
{name: 'LOAD_DATE', type: 'string'}
],
autoLoad: true
});
var detailsPanel = new Ext.grid.GridPanel({
title: "Active Fires",
region: "west",
border: true,
store: store,
columns: [{header: 'Name', dataIndex: 'FIRE_NAME'},
{header: 'Acreage', dataIndex: 'ACRES'},
{header: 'Updated', dataIndex: 'LOAD_DATE'}],
width: 300,
height: 600,
sm: new GeoExt.grid.FeatureSelectionModel()
});
*Full Page code:*
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title><!-- Insert your title here --></title>
<style type="text/css">
.zoomin {
background-image: url(
http://69.62.213.170/geoext/img/icon_zoomin.png) !important;
height:20px !important;
width:20px !important;
}
.zoomout {
background-image: url(
http://69.62.213.170/geoext/img/icon_zoomout.png) !important;
height:20px !important;
width:20px !important;
}
.zoomfull {
background-image:url(
http://69.62.213.170/geoext/img/icon_zoomfull.png) !important;
height:20px !important;
width:20px !important;
}
.pan {
background-image:url(http://69.62.213.170/geoext/img/icon_pan.png)
!important;
height:20px !important;
width:20px !important;
}
.info {
background-image:url(http://69.62.213.170/geoext/img/info.png)
!important;
height:20px !important;
width:20px !important;
}
.back {
background-image:url(
http://69.62.213.170/geoext/img/resultset_previous.png) !important;
height:20px !important;
width:20px !important;
}
.next {
background-image:url(
http://69.62.213.170/geoext/img/resultset_next.png) !important;
height:20px !important;
width:20px !important;
}
</style>
<script src="OpenLayers.js" type="text/javascript"></script>
<script src="
http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAswMtbwtotJmv90ak01iBixQU8MLjHkCOgUOFxqy3Ydl6JRQ1exRBk-QjQ5UGpjClJkRmte_it9YuCA"
type="text/javascript"></script>
<script src="ext-2.3.0/adapter/ext/ext-base.js"
type="text/javascript"></script>
<script src="ext-2.3.0/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
href="ext-2.3.0/resources/css/ext-all.css"></link>
<script src="GeoExt/GeoExt/lib/GeoExt.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.onReady(function () {
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
units: "m",
maxResolution: 156543.0339,
resolutions: [156543.03390000001, 78271.516950000005,
39135.758475000002, 19567.879237500001, 9783.9396187500006,
4891.9698093750003, 2445.9849046875001, 1222.9924523437501,
611.49622617187504, 305.74811308593752, 152.87405654296876,
76.43702827148438, 38.21851413574219, 19.109257067871095,
9.5546285339355475, 4.7773142669677737, 2.3886571334838869,
1.1943285667419434, 0.59716428337097172, 0.29858214168548586],
maxExtent: new OpenLayers.Bounds(-20037508, -20037508, 20037508,
20037508.34)
};
var map = new OpenLayers.Map('map', options);
var gphy = new OpenLayers.Layer.Google(
"Physical Relief",
{type: G_PHYSICAL_MAP, sphericalMercator: true, isBaseLayer: true}
);
gphy.displayInLayerSwitcher = true;
map.addLayer(gphy);
var gstreets = new OpenLayers.Layer.Google(
"Google Streets",
{sphericalMercator: true}
);
gstreets.displayInLayerSwitcher = true;
map.addLayer(gstreets);
var gsat = new OpenLayers.Layer.Google(
"Satellite",
{type: G_SATELLITE_MAP, sphericalMercator: true}
);
gsat.displayInLayerSwitcher = true;
map.addLayer(gsat);
var fireLines = new OpenLayers.Layer.Vector("Fire Lines");
map.addLayer(fireLines);
var modis24 = new OpenLayers.Layer.GML("Modis 24",
"gml/modis24.xml",
{style: {'externalGraphic':
'fire_icon.svg.png', 'pointRadius': '6', 'graphicOpacity': '1'}, visibility:
true});
map.addLayer(modis24);
var modis48 = new OpenLayers.Layer.GML("Modis 48",
"gml/modis48.xml",
{style: {'externalGraphic':
'fire_icon.svg.png', 'pointRadius': '6', 'graphicOpacity': '0.6'}});
map.addLayer(modis48);
var modis7 = new OpenLayers.Layer.GML("Modis 7d",
"gml/modis7d.xml",
{style: {'externalGraphic':
'fire_icon.svg.png', 'pointRadius': '6', 'graphicOpacity': '0.3'}});
map.addLayer(modis7);
var sacto = new OpenLayers.LonLat(-13523315.47936, 4661053.54715);
map.setCenter(sacto, 6);
var toolbarItems = []
var createToolbar = function() {
var action;
var createSeparator = function() {
toolbarItems.push(" ");
toolbarItems.push("-");
toolbarItems.push(" ");
};
action = new GeoExt.Action({
control: new OpenLayers.Control.ZoomToMaxExtent(),
map: map,
iconCls: 'zoomfull',
toggleGroup: 'map',
tooltip: 'Zoom to full extent'
});
toolbarItems.push(action);
createSeparator();
action = new GeoExt.Action({
control: new OpenLayers.Control.ZoomBox(),
tooltip: 'Zoom in: click in the map or use the left mouse
button and drag to create a rectangle',
map: map,
iconCls: 'zoomin',
toggleGroup: 'map'
});
toolbarItems.push(action);
action = new GeoExt.Action({
control: new OpenLayers.Control.ZoomBox({
out: true
}),
tooltip: 'Zoom out: click in the map or use the left mouse
button and drag to create a rectangle',
map: map,
iconCls: 'zoomout',
toggleGroup: 'map'
});
toolbarItems.push(action);
action = new GeoExt.Action({
control: new OpenLayers.Control.DragPan({
isDefault: true
}),
tooltip: 'Pan map: keep the left mouse button pressed and
drag the map',
map: map,
iconCls: 'pan',
toggleGroup: 'map'
});
toolbarItems.push(action);
createSeparator();
ctrl = new OpenLayers.Control.NavigationHistory();
map.addControl(ctrl);
action = new GeoExt.Action({
tooltip: "Previous view",
control: ctrl.previous,
iconCls: 'back',
disabled: true
});
toolbarItems.push(action);
action = new GeoExt.Action({
tooltip: "Next view",
control: ctrl.next,
iconCls: 'next',
disabled: true
});
toolbarItems.push(action);
createSeparator();
};
createToolbar();
var store = new GeoExt.data.FeatureStore({
layer: fireLines,
proxy: new GeoExt.data.ProtocolProxy({
protocol: new OpenLayers.Protocol.HTTP({
url: "gml/perimeters.xml",
format: new OpenLayers.Format.GML()
})
}),
fields: [
{name: 'FIRE_NAME', type: 'string'},
{name: 'ACRES', type: 'string'},
{name: 'LOAD_DATE', type: 'string'}
],
autoLoad: true
});
var detailsPanel = new Ext.grid.GridPanel({
title: "Active Fires",
region: "west",
border: true,
store: store,
columns: [{header: 'Name', dataIndex: 'FIRE_NAME'},
{header: 'Acreage', dataIndex: 'ACRES'},
{header: 'Updated', dataIndex: 'LOAD_DATE'}],
width: 300,
height: 600,
sm: new GeoExt.grid.FeatureSelectionModel()
});
var mapPanel = new GeoExt.MapPanel({
height: 600,
width: 524,
border: true,
region: 'center',
map: map,
center: new OpenLayers.LonLat(-13523315.47936,4661053.54715),
zoom: 6,
tbar: toolbarItems
});
var treeConfig = [
{
"nodeType": "gx_baselayercontainer"
},
{
"nodeType": "gx_overlaylayercontainer",
"loader": {
"baseAttrs": {
"radioGroup": "foo"
}
}
},
{
"nodeType": "gx_layer",
"layer": "Fire Lines"
}
]
var tree = new Ext.tree.TreePanel({
border: true,
region: 'east',
title: "Layers",
width: 200,
height: 600,
split: true,
autoScroll: true,
loader: new Ext.tree.TreeLoader({
applyLoader: false
}),
root: {
nodeType: "async",
children: treeConfig
},
rootVisible: false,
lines: false
});
var mainView = new Ext.Panel({
layout: 'border',
renderTo: 'view',
height: 400,
width: 1024,
items: [detailsPanel, mapPanel, tree]
})
});
</script>
</head>
<body>
<div id="view"></div>
</body>
</html>
Aidian Holder
It is not necessary to remind you that the fact that your voice is amplified
to the degree where it reaches from one end of the country to the other does
not confer upon you greater wisdom or understanding than you possessed when
your voice reached only from one end of the bar to the other.
-Edward R. Murrow
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20090904/a24ed3c7/attachment-0001.htm
More information about the Users
mailing list