Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <script type="text/javascript" src=""></script>
    <script type="text/javascript" src=""></script>
    <link rel="stylesheet" type="text/css" href="" />
    <script src=""></script>
    <script type="text/javascript" src=""></script>
<script type="text/javascript">
var map, layer;

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

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

Ext.onReady(function() {

    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


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

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

Your Answer


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

Browse other questions tagged or ask your own question.