[Users] Internet Explorer issues

Matt Priour mpriour at kestrelcomputer.com
Sat Sep 5 03:53:36 CEST 2009


Is this application on a server or are you testing it locally?
If you are testing locally then I would think a 'local zone' 'active content' security setting in IE7 might be preventing the XML file from ever being accessed.
If you are testing from a server then I am equally lost, since it easily passes any 'same origin policy' restrictions.
My other guess would be that you may need to explicitly include VML support in the page metatags or in OpenLayers.

Using tools like Fiddler & Web Developer Express will help you debug this in IE. You should uncheck "Disable Script Debugging" in the Advanced Internet Options for IE. Then give us any error message and the bit of offending code.

Matt Priour
Kestrel Computer Consulting


From: Aidian Holder 
Sent: Friday, September 04, 2009 3:41 PM
To: users at geoext.org 
Subject: [Users] Internet Explorer issues


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&amp;v=2&amp;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



--------------------------------------------------------------------------------


_______________________________________________
Users mailing list
Users at geoext.org
http://www.geoext.org/cgi-bin/mailman/listinfo/users
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.geoext.org/pipermail/users/attachments/20090904/7b6f3f50/attachment-0001.htm 


More information about the Users mailing list