<div>I am trying to test following scenario:</div><div><br></div><div> - A Ext.Window has one gx_mappanel item; </div><div> </div><div> </div><div> - both Ext.Window and gx_mappanel are stored in variables;</div><div><br>
</div><div> </div><div> </div><div><br></div><div> - One button is to remove gx_mappanel item from Ext.Window container;</div><div><br></div><div> </div><div><br></div><div> - The other button is to add this gx_mappanel item back to Ext.Window </div>
<div> container;</div><div><br></div><div>However:</div><div> Once mappanel is removed, it cannot be added back to its container. </div><div><br></div><div>The issue happens in IE browser, and the error is:</div><div>
<br></div><div> SCRIPT5007: Unable to get value of the property 'removeChild': object is null or undefined </div><div><br></div><div>which is in OpenLayers.js, line 825 character 412:</div><div><br></div>
<div> render: function(div) {</div><div> this.div = OpenLayers.Util.getElement(div);</div><div> OpenLayers.Element.addClass(this.div, 'olMap');</div><div> this.viewPortDiv.parentNode.removeChild(this.viewPortDiv);</div>
<div> this.div.appendChild(this.viewPortDiv);</div><div> this.updateSize();</div><div> }</div><div> </div><div>Codes I've tried:</div><div><br></div><div> <! DOCTYPE HTML></div><div>
<html></div>
<div> <head></div><div> <title>GeoExt MapPanel Example</title></div><div><br></div><div> <script type="text/javascript" src="<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>"></script></div>
<div> <script type="text/javascript" src="<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>"></script></div><div> <link rel="stylesheet" type="text/css" href="<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>" /></div>
<div> <link rel="stylesheet" type="text/css" href="<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>" /></div>
<div> <script src="<a href="http://www.openlayers.org/api/2.10/OpenLayers.js">http://www.openlayers.org/api/2.10/OpenLayers.js</a>"></script></div><div> <script type="text/javascript" src="<a href="http://api.geoext.org/1.0/script/GeoExt.js">http://api.geoext.org/1.0/script/GeoExt.js</a>"></script></div>
<div><br></div><div> <script type="text/javascript"></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var mapPanel;</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var parentWin;</div>
<div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>Ext.onReady(function() {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var map = new OpenLayers.Map();</div><div>
<span class="Apple-tab-span" style="white-space:pre"> </span>var layer = new OpenLayers.Layer.WMS(</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>"Global Imagery",</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>"<a href="http://maps.opengeo.org/geowebcache/service/wms">http://maps.opengeo.org/geowebcache/service/wms</a>",</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>{layers: "bluemarble"}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>);</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>map.addLayer(layer);</div>
<div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>mapPanel = {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>xtype : 'gx_mappanel',</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>id : 'MAP_PANEL',</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>map : map,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>zoom: 6</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>};</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span> parentWin = new Ext.Window({</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>title: "GeoExt MapPanel Window",</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>height: 400,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>width: 600,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>layout: "fit",</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>items: [mapPanel]</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}).show();</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>});</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>function mapGone() {</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>parentWin.removeAll();</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>parentWin.doLayout();</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>function mapBack() {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>parentWin.add(mapPanel);</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>parentWin.doLayout();</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></script></div>
<div> </head></div><div> <body></div><div><span class="Apple-tab-span" style="white-space:pre"> </span><input type="button" onclick="mapGone()" value="map gone"></input></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span><input type="button" onclick="mapBack()" value="map back"></input></div><div> </body></div><div></html></div>
<div><br></div><div>I really wish somebody can give me some advice...</div><div>appreciate in advance!!</div>