<html><head></head><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; ">Try and remove the renderTo for map and layer tree.<div><br></div><div>Best regards,</div><div>Bart</div><div><br><div>
<span class="Apple-style-span" style="border-collapse: separate; color: rgb(0, 0, 0); font-family: Helvetica; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-align: auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-border-horizontal-spacing: 0px; -webkit-border-vertical-spacing: 0px; -webkit-text-decorations-in-effect: none; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; font-size: medium; "><div>-- <br>Bart van den Eijnden<br>OpenGeo - <a href="http://opengeo.org/">http://opengeo.org</a><br>Expert service straight from the developers.</div><div><br></div></span><br class="Apple-interchange-newline">
</div>
<br><div><div>On Feb 15, 2012, at 1:24 PM, Francesc Caņas wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite">Hi, <div>Following the tree tutorial I've created a map with a layerTree, It works but I want the tree in the west region and map at center, but instead of this, all is displayed at left side with the tree up the map. What I'm doing wrong?</div>
<div><br></div><div>Thanks a lot!</div><div><br></div><div><br></div><div>The whole code is:</div><div><br></div><div><div><html></div><div><head></div><div><br></div><div><title> Projectes AUMA </title></div>
<div><script src="ext-3.3.1/adapter/ext/ext-base.js" type="text/javascript"></script></div><div><script src="ext-3.3.1/ext-all.js" type="text/javascript"></script></div>
<div><link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css"></link></div><div><script src="OpenLayers/OpenLayers.js" type="text/javascript"></script></div>
<div><script src="GeoExt/lib/GeoExt.js" type="text/javascript"></script></div><div><link rel="stylesheet" type="text/css" href="GeoExt/resources/geoext-all-debug.css"></link></div>
<div><br></div><div><script type="text/javascript"></div><div><br></div><div><br></div><div>var mapPanel, tree;</div><div>Ext.onReady(function() {</div><div> // create a map panel with some layers that we will show in our layer tree</div>
<div> // below.</div><div> </div><div><span class="Apple-tab-span" style="white-space:pre"> </span>mapPanel = new GeoExt.MapPanel({</div><div> border: true,</div><div> region: "center",</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>map: new OpenLayers.Map(),</div><div> renderTo: 'gxmap',</div><div> height: 500,</div><div> width: 800,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>title: 'Projectes AUMA',</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>zoom: 4,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>center: new OpenLayers.LonLat (-3,38),</div><div> layers: [</div><div>
new OpenLayers.Layer.WMS(</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>"World", "<a href="http://www.opengis.uab.es/cgi-bin/world/MiraMon.cgi">http://www.opengis.uab.es/cgi-bin/world/MiraMon.cgi</a>?",</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>{</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>layers:['BlueMarble_NG','admin_level1-world']</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>}, {</div>
<div> buffer: 0,</div><div> visibility: false</div><div> }</div><div> ),</div><div> </div><div> new OpenLayers.Layer.WMS(</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>"Projectes UTM31",</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>"<a href="http://localhost:8080/geoserver/AUMA/wms">http://localhost:8080/geoserver/AUMA/wms</a>",</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>{</div>
<div> layers: 'AUMA:Projectes_UTM31',</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> transparent:true,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> format: 'image/png'},</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span> {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> isBaseLayer:false, </div><div><span class="Apple-tab-span" style="white-space:pre"> </span> buffer: 0</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>new OpenLayers.Layer.WMS(</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>"Projectes UTM30",</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>"<a href="http://localhost:8080/geoserver/AUMA/wms">http://localhost:8080/geoserver/AUMA/wms</a>",</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>{</div><div> layers: 'AUMA:Projectes_Esp',</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> transparent:true,</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span> format: 'image/png'},</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> {</div><div><span class="Apple-tab-span" style="white-space:pre"> </span> isBaseLayer:false,</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span> buffer: 0</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> </div><div> </div><div> ]</div><div> });</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var LayerNodeUI = Ext.extend(GeoExt.tree.LayerNodeUI, new GeoExt.tree.TreeNodeUIEventMixin());</div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var treeConfig = [{</div><div> nodeType: "gx_baselayercontainer"</div>
<div> }, {</div><div> nodeType: "gx_overlaylayercontainer",</div><div> expanded: true,</div><div> // render the nodes inside this container with a radio button,</div><div> // and assign them the group "foo".</div>
<div> loader: {</div><div> baseAttrs: {</div><div> radioGroup: "foo",</div><div> uiProvider: "layernodeui"</div><div> }</div><div> }</div>
<div> }];</div><div><span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var layerList = new GeoExt.tree.LayerContainer({</div><div> text: 'Capes',</div>
<div> layerStore: mapPanel.layers,</div><div> leaf: false,</div><div> expanded: true</div><div>});</div><div><br></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>var layerTree = new Ext.tree.TreePanel({</div>
<div> title: 'Map Layers',</div><div> renderTo: 'layerTree',</div><div> root: layerList,<span class="Apple-tab-span" style="white-space:pre"> </span></div><div><span class="Apple-tab-span" style="white-space:pre"> </span>border: true,</div>
<div> region: "west",</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>width: 200,</div><div> split: true,</div><div> collapsible: true,</div><div> collapseMode: "mini",</div>
<div> autoScroll: true,</div><div> plugins: [</div><div> new GeoExt.plugins.TreeNodeRadioButton({</div><div> listeners: {</div><div> "radiochange": function(node) {</div>
<div> alert(node.text + " is now the active layer.");</div><div> }</div><div> }</div><div> })</div><div> ],</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>loader: new Ext.tree.TreeLoader({</div>
<div> // applyLoader has to be set to false to not interfer with loaders</div><div> // of nodes further down the tree hierarchy</div><div> applyLoader: false,</div><div> uiProviders: {</div>
<div> "layernodeui": LayerNodeUI</div><div> }</div><div> }),</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>listeners: {</div><div> "radiochange": function(node){</div>
<div> alert(<a href="http://node.layer.name/">node.layer.name</a> + " is now the the active layer.");</div><div> }</div><div> },<span class="Apple-tab-span" style="white-space:pre"> </span></div>
<div><span class="Apple-tab-span" style="white-space:pre"> </span>rootVisible: false,</div><div> lines: false<span class="Apple-tab-span" style="white-space:pre"> </span></div><div>});</div><div><br></div><div>new Ext.Viewport({</div>
<div> layout: "fit",</div><div> hideBorders: true,</div><div> items: {</div><div> layout: "border",</div><div> deferredRender: false,</div><div> items: [mapPanel, layerTree, {</div>
<div> contentEl: "desc",</div><div> region: "east",</div><div> bodyStyle: {"padding": "5px"},</div><div> collapsible: true,</div>
<div> collapseMode: "mini",</div><div> split: true,</div><div> width: 200,</div><div> title: "Description"</div><div> }]</div><div>
}</div><div> });</div><div><br></div><div> </div><div>});</div><div><br></div><div></script></div><div></head></div><div><body></div><div><br></div><div><div id="gxmap"></div></div>
<div><div id="layerTree"></div></div><div><br></div><div><br></div><div></body></div><div></html></div></div><div><br></div><div><br clear="all"><div><br></div>-- <br><a href="http://kikocanas.blogspot.com/" target="_blank">http://kikocanas.blogspot.com</a><br>
</div>
_______________________________________________<br>Users mailing list<br><a href="mailto:Users@geoext.org">Users@geoext.org</a><br>http://www.geoext.org/cgi-bin/mailman/listinfo/users<br></blockquote></div><br></div></body></html>