thanks for your help..<div><br></div><div>but it still doesnt work in IE..</div><div><br></div><div>my ultimate goal is to switch mappanel among three different containers, and I don't want to define three map_panels.. since that will bring down client performance..</div>
<div>I tried to define three map_panels, but only set one panel's map property as real map object, the other twos are set as NULL. but for somehow, it doesnt work well either...</div><div><br></div><div>current method (remove, add) works well in FF and Chrome.. just cant walk around in IE... </div>
<div><br><div class="gmail_quote">On Sat, Dec 10, 2011 at 12:42 AM, Andreas Hocevar <span dir="ltr"><<a href="mailto:ahocevar@opengeo.org">ahocevar@opengeo.org</a>></span> wrote:<br><blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex">
<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><div><div></div><div class="h5">
<p>On Dec 10, 2011 7:31 AM, "Xudong" <<a href="mailto:liuxd8510@gmail.com" target="_blank">liuxd8510@gmail.com</a>> wrote:<br>
><br>
> I am trying to test following scenario:<br>
><br>
> - A Ext.Window has one gx_mappanel item; <br>
> <br>
> <br>
> - both Ext.Window and gx_mappanel are stored in variables;<br>
><br>
> <br>
> <br>
><br>
> - One button is to remove gx_mappanel item from Ext.Window container;<br>
><br>
> <br>
><br>
> - The other button is to add this gx_mappanel item back to Ext.Window <br>
> container;<br>
><br>
> However:<br>
> Once mappanel is removed, it cannot be added back to its container. <br>
><br>
> The issue happens in IE browser, and the error is:<br>
><br>
> SCRIPT5007: Unable to get value of the property 'removeChild': object is null or undefined <br>
><br>
> which is in OpenLayers.js, line 825 character 412:<br>
><br>
> render: function(div) {<br>
> this.div = OpenLayers.Util.getElement(div);<br>
> OpenLayers.Element.addClass(this.div, 'olMap');<br>
> this.viewPortDiv.parentNode.removeChild(this.viewPortDiv);<br>
> this.div.appendChild(this.viewPortDiv);<br>
> this.updateSize();<br>
> }<br>
> <br>
> Codes I've tried:<br>
><br>
> <! DOCTYPE HTML><br>
> <html><br>
> <head><br>
> <title>GeoExt MapPanel Example</title><br>
><br>
> <script type="text/javascript" src="<a href="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js" target="_blank">http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js</a>"></script><br>
> <script type="text/javascript" src="<a href="http://extjs.cachefly.net/ext-3.2.1/ext-all.js" target="_blank">http://extjs.cachefly.net/ext-3.2.1/ext-all.js</a>"></script><br>
> <link rel="stylesheet" type="text/css" href="<a href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css" target="_blank">http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css</a>" /><br>
> <link rel="stylesheet" type="text/css" href="<a href="http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css" target="_blank">http://extjs.cachefly.net/ext-3.2.1/examples/shared/examples.css</a>" /><br>
> <script src="<a href="http://www.openlayers.org/api/2.10/OpenLayers.js" target="_blank">http://www.openlayers.org/api/2.10/OpenLayers.js</a>"></script><br>
> <script type="text/javascript" src="<a href="http://api.geoext.org/1.0/script/GeoExt.js" target="_blank">http://api.geoext.org/1.0/script/GeoExt.js</a>"></script><br>
><br>
> <script type="text/javascript"><br>
> var mapPanel;<br>
> var parentWin;<br>
><br>
> Ext.onReady(function() {<br>
> var map = new OpenLayers.Map();<br>
> var layer = new OpenLayers.Layer.WMS(<br>
> "Global Imagery",<br>
> "<a href="http://maps.opengeo.org/geowebcache/service/wms" target="_blank">http://maps.opengeo.org/geowebcache/service/wms</a>",<br>
> {layers: "bluemarble"}<br>
> );<br>
> map.addLayer(layer);<br>
><br>
> mapPanel = {<br>
> xtype : 'gx_mappanel',<br>
> id : 'MAP_PANEL',<br>
> map : map,<br>
> zoom: 6<br>
> };<br>
> parentWin = new Ext.Window({<br>
> title: "GeoExt MapPanel Window",<br>
> height: 400,<br>
> width: 600,<br>
> layout: "fit",<br>
> items: [mapPanel]<br>
> }).show();</p>
</div></div><p>mapPanel = parentWindow.items.get(0);</p><div class="im">
<p>> });<br>
> function mapGone() {<br>
> parentWin.removeAll();<br>
> parentWin.doLayout();<br>
> }<br>
> function mapBack() {<br>
> parentWin.add(mapPanel);<br>
> parentWin.doLayout();<br>
> }<br>
> </script><br>
> </head><br>
> <body><br>
> <input type="button" onclick="mapGone()" value="map gone"></input><br>
> <input type="button" onclick="mapBack()" value="map back"></input><br>
> </body><br>
> </html><br>
><br>
> I really wish somebody can give me some advice...<br>
> appreciate in advance!!</p>
</div><p>Andreas.</p>
<p>><br>
> _______________________________________________<br>
> Users mailing list<br>
> <a href="mailto:Users@geoext.org" target="_blank">Users@geoext.org</a><br>
> <a href="http://www.geoext.org/cgi-bin/mailman/listinfo/users" target="_blank">http://www.geoext.org/cgi-bin/mailman/listinfo/users</a><br>
><br>
</p>
</blockquote></div><br></div>