<p>Your mapPanel variable only holds the configuration of the MapPanel, not the component instance.</p>
<p>Add one line of code (see below) and it should work.</p>
<p>Note, however, that hiding a component and showing it again would be less expensive than removing and adding it again. </p>
<p>On Dec 10, 2011 7:31 AM, &quot;Xudong&quot; &lt;<a href="mailto:liuxd8510@gmail.com">liuxd8510@gmail.com</a>&gt; wrote:<br>
&gt;<br>
&gt; I am trying to test following scenario:<br>
&gt;<br>
&gt;  - A Ext.Window has one gx_mappanel item; <br>
&gt;    <br>
&gt;    <br>
&gt;  - both Ext.Window and gx_mappanel are stored in variables;<br>
&gt;<br>
&gt;    <br>
&gt;    <br>
&gt;<br>
&gt;  - One button is to remove gx_mappanel item from Ext.Window container;<br>
&gt;<br>
&gt;    <br>
&gt;<br>
&gt;  - The other button is to add this gx_mappanel item back to Ext.Window  <br>
&gt;    container;<br>
&gt;<br>
&gt; However:<br>
&gt;     Once mappanel is removed, it cannot be added back to its container. <br>
&gt;<br>
&gt; The issue happens in IE browser, and the error is:<br>
&gt;<br>
&gt;     SCRIPT5007: Unable to get value of the property &#39;removeChild&#39;: object is null or undefined       <br>
&gt;<br>
&gt; which is in OpenLayers.js, line 825 character 412:<br>
&gt;<br>
&gt;     render: function(div) {<br>
&gt;         this.div = OpenLayers.Util.getElement(div);<br>
&gt;         OpenLayers.Element.addClass(this.div, &#39;olMap&#39;);<br>
&gt;         this.viewPortDiv.parentNode.removeChild(this.viewPortDiv);<br>
&gt;         this.div.appendChild(this.viewPortDiv);<br>
&gt;         this.updateSize();<br>
&gt;     }<br>
&gt;      <br>
&gt; Codes I&#39;ve tried:<br>
&gt;<br>
&gt;         &lt;! DOCTYPE HTML&gt;<br>
&gt;     &lt;html&gt;<br>
&gt;         &lt;head&gt;<br>
&gt;             &lt;title&gt;GeoExt MapPanel Example&lt;/title&gt;<br>
&gt;<br>
&gt;         &lt;script type=&quot;text/javascript&quot; src=&quot;<a href="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js">http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js</a>&quot;&gt;&lt;/script&gt;<br>

&gt;         &lt;script type=&quot;text/javascript&quot; src=&quot;<a href="http://extjs.cachefly.net/ext-3.2.1/ext-all.js">http://extjs.cachefly.net/ext-3.2.1/ext-all.js</a>&quot;&gt;&lt;/script&gt;<br>
&gt;         &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;<a href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css">http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css</a>&quot; /&gt;<br>

&gt;         &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;<a href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css">http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css</a>&quot; /&gt;<br>

&gt;         &lt;script src=&quot;<a href="http://www.openlayers.org/api/2.10/OpenLayers.js">http://www.openlayers.org/api/2.10/OpenLayers.js</a>&quot;&gt;&lt;/script&gt;<br>
&gt;         &lt;script type=&quot;text/javascript&quot; src=&quot;<a href="http://api.geoext.org/1.0/script/GeoExt.js">http://api.geoext.org/1.0/script/GeoExt.js</a>&quot;&gt;&lt;/script&gt;<br>
&gt;<br>
&gt;         &lt;script type=&quot;text/javascript&quot;&gt;<br>
&gt; var mapPanel;<br>
&gt; var parentWin;<br>
&gt;<br>
&gt; Ext.onReady(function() {<br>
&gt; var map = new OpenLayers.Map();<br>
&gt; var layer = new OpenLayers.Layer.WMS(<br>
&gt; &quot;Global Imagery&quot;,<br>
&gt; &quot;<a href="http://maps.opengeo.org/geowebcache/service/wms">http://maps.opengeo.org/geowebcache/service/wms</a>&quot;,<br>
&gt; {layers: &quot;bluemarble&quot;}<br>
&gt; );<br>
&gt; map.addLayer(layer);<br>
&gt;<br>
&gt; mapPanel = {<br>
&gt; xtype : &#39;gx_mappanel&#39;,<br>
&gt; id : &#39;MAP_PANEL&#39;,<br>
&gt; map : map,<br>
&gt; zoom: 6<br>
&gt; };<br>
&gt; parentWin = new Ext.Window({<br>
&gt; title: &quot;GeoExt MapPanel Window&quot;,<br>
&gt; height: 400,<br>
&gt; width: 600,<br>
&gt; layout: &quot;fit&quot;,<br>
&gt; items: [mapPanel]<br>
&gt; }).show();</p>
<p>mapPanel = parentWindow.items.get(0);</p>
<p>&gt; });<br>
&gt; function mapGone() {<br>
&gt; parentWin.removeAll();<br>
&gt; parentWin.doLayout();<br>
&gt; }<br>
&gt; function mapBack() {<br>
&gt; parentWin.add(mapPanel);<br>
&gt; parentWin.doLayout();<br>
&gt; }<br>
&gt; &lt;/script&gt;<br>
&gt;     &lt;/head&gt;<br>
&gt;     &lt;body&gt;<br>
&gt; &lt;input type=&quot;button&quot; onclick=&quot;mapGone()&quot; value=&quot;map gone&quot;&gt;&lt;/input&gt;<br>
&gt; &lt;input type=&quot;button&quot; onclick=&quot;mapBack()&quot; value=&quot;map back&quot;&gt;&lt;/input&gt;<br>
&gt;     &lt;/body&gt;<br>
&gt; &lt;/html&gt;<br>
&gt;<br>
&gt; I really wish somebody can give me some advice...<br>
&gt; appreciate in advance!!</p>
<p>Andreas.</p>
<p>&gt;<br>
&gt; _______________________________________________<br>
&gt; Users mailing list<br>
&gt; <a href="mailto:Users@geoext.org">Users@geoext.org</a><br>
&gt; <a href="http://www.geoext.org/cgi-bin/mailman/listinfo/users">http://www.geoext.org/cgi-bin/mailman/listinfo/users</a><br>
&gt;<br>
</p>