Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

Techonology: GeoExt, which combines ExtJS with OpenLayers

I am trying to dynamically change the app layout by changing a map_panel from container A to container B, and vice verse; basically, for each operation (double click panel header in following codes), the original container A will hide and remove this map_panel from it, then the new container B will add this map_panel object as an item and show up. The following code snippet works fine in Chrome15 and FF8, but in IE9, it has following errors:

SCRIPT5007: Unable to get value of the property 'removeChild': object is null or undefined 

OpenLayers.js, line 825 character 412

I am wondering what else I need to add or config in order to make this work in IE as well... any advice are much appreciated......

codes (copy&run):

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" />
    <script src="http://www.openlayers.org/api/2.10/OpenLayers.js"></script>
    <script type="text/javascript" src="http://api.geoext.org/1.0/script/GeoExt.js"></script>
</head>
<script type="text/javascript">
var map, layer;

map = new OpenLayers.Map( ); //define map object
layer = new OpenLayers.Layer.OSM( "Simple OSM Map");
map.addLayer(layer);
map.setCenter(
    new OpenLayers.LonLat(-71.147, 42.472).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()
    ), 4
);    


Ext.BLANK_IMAGE_URL = 'img/s.gif';

Ext.onReady(function() {
    Ext.QuickTips.init();

    var mapPanel = { //put map object in a Panel, using GeoExt class 'gx_mappanel'
        xtype : 'gx_mappanel',
        id : 'MAP_PANEL',
        map : map,
        zoom: 6
    };

    //define viewport
    var viewPort = new Ext.Viewport({ 
      layout: 'border',
        items: [
        { //east container for mapPanel
            title: 'Map',
            id: 'mapEast',
            region: 'east',
            layout: 'fit',
            width: 200,
            border: true,
            frame: true,
            hidden: true,
            items: []
        }, { //center container for mapPanel
            title: 'Map',
            id: 'mapCenter',
            region: 'center',
            frame: true,
            layout: 'fit',
            items: [mapPanel]
        }]
    });

    var mapCenter = Ext.getCmp("mapCenter");
    var mapEast = Ext.getCmp("mapEast");

    mapCenter.header.on("dblclick",function(){ //double click header of mapCenter, map goes to east Container, and centerContainer hides
        mapCenter.hide();
        mapCenter.removeAll();

        mapEast.add(mapPanel);
        mapEast.show();
        viewPort.doLayout();
    });

    mapEast.header.on("dblclick",function(){ //double click header of mapEast, map shows in center Container, east container hides
        mapEast.hide();
        mapEast.removeAll();

        mapCenter.add(mapPanel);
        mapCenter.show();
        viewPort.doLayout();
    });
}); 
</script>
<body>
</body>
</html>
share|improve this question
    
BTW, in IE9 QuickTiups also not shows ... –  user5832 Feb 8 '12 at 9:45
    
shouldn't var mapPanel = { be var mapPanel = new GeoExt.MapPanel({ ? –  unicoletti Feb 8 '12 at 11:03
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.