<div dir="ltr"><div>Dear all,</div><div><br></div><div>I've tried to add the LegendPanel object to the main panel in several ways but it never works (appears simply blank). The only way the LegendPanel is correctly associated with the map is by defining it in line in the items array of the main panel (that must contain a MapPanel) and without specifying a LayerStore. Please see below two configuration examples showing who it works and how it doesn't.</div>
<div><br></div><div>My first question: is this the way it is supposed to be or am I missing something in the LegendPanel configuration?</div><div><br></div><div>And secondly: is there any other way to show a legend with GeoExt?</div>
<div><br></div><div>Thank you,</div><div><br></div><div>Luís</div><div><br></div><div>/****************************************************************************</div><div> * Config 1: Legend defined in line without layerStore - it works</div>
<div><br></div><div><span class="" style="white-space:pre"> </span>var mapPanel = new GeoExt.MapPanel({</div><div> region: "center",</div><div> collapsible: false,</div><div> floatable: false,</div>
<div> xtype: "gx_mappanel",</div><div> map: map</div><div> });</div><div><br></div><div><span class="" style="white-space:pre"> </span>var LayerNodeUI = Ext.extend(</div><div><span class="" style="white-space:pre"> </span> GeoExt.tree.LayerNodeUI,</div>
<div><span class="" style="white-space:pre"> </span> new GeoExt.tree.TreeNodeUIEventMixin()</div><div><span class="" style="white-space:pre"> </span>);</div><div> </div><div> var treeConfig = [{</div><div> nodeType: "gx_baselayercontainer",</div>
<div> expanded: true</div><div> }, {</div><div> nodeType: "gx_overlaylayercontainer",</div><div> expanded: true</div><div> }];</div><div><br></div><div> var treePanel = new Ext.tree.TreePanel({</div>
<div> <span class="" style="white-space:pre"> </span>itemId:'navTree',</div><div> region: "east",</div><div> title: "Layers",</div><div> width: 170,</div><div> collapsible: true,</div>
<div> autoScroll: true,</div><div> enableDD: true,</div><div> plugins: [{</div><div> ptype: "gx_treenodecomponent"</div><div> }],</div><div> loader: {</div><div> applyLoader: false,</div>
<div> uiProviders: {"custom_ui": LayerNodeUI}</div><div> },</div><div> root: {children: treeConfig},</div><div> rootVisible: false,</div><div> lines: false</div><div> });</div>
<div> </div><div> var mainPanel = new Ext.Panel({</div><div><span class="" style="white-space:pre"> </span> layout:'border',</div><div><span class="" style="white-space:pre"> </span> bodyBorder: false,</div>
<div><span class="" style="white-space:pre"> </span> renderTo: "MiniMap",</div><div> stateId: "MiniMap",</div><div> height: 400,</div><div> width: 700,</div><div><span class="" style="white-space:pre"> </span>defaults: {</div>
<div><span class="" style="white-space:pre"> </span> split: true,</div><div> autoHide: false,</div><div> useSplitTips: true,</div><div><span class="" style="white-space:pre"> </span>},</div><div>
<span class="" style="white-space:pre"> </span>items: [mapPanel, treePanel,</div><div><span class="" style="white-space:pre"> </span>{</div><div><span class="" style="white-space:pre"> </span>title: "Legend",</div>
<div><span class="" style="white-space:pre"> </span>xtype: "gx_legendpanel",</div><div><span class="" style="white-space:pre"> </span>region:'west',</div><div><span class="" style="white-space:pre"> </span>width: 100,</div>
<div><span class="" style="white-space:pre"> </span>collapsible: true,</div><div><span class="" style="white-space:pre"> </span>autoScroll: true,</div><div><span class="" style="white-space:pre"> </span>enableDD: true,</div>
<div><span class="" style="white-space:pre"> </span>padding: 5,</div><div><span class="" style="white-space:pre"> </span>rootVisible: false,</div><div><span class="" style="white-space:pre"> </span>lines: false</div>
<div><span class="" style="white-space:pre"> </span>}]<span class="" style="white-space:pre"> </span></div><div> });</div><div>/****************************************************************************/</div><div><br>
</div><div>/****************************************************************************</div><div> * Config 2: Legend defined as a variable with layerStore - doesn't work</div><div><br></div><div><span class="" style="white-space:pre"> </span>var mapPanel = new GeoExt.MapPanel({</div>
<div> region: "center",</div><div> collapsible: false,</div><div> floatable: false,</div><div> xtype: "gx_mappanel",</div><div> map: map</div><div> });</div><div><br>
</div><div><span class="" style="white-space:pre"> </span>var myLayerStore = new GeoExt.data.LayerStore({</div><div><span class="" style="white-space:pre"> </span> map: map,</div><div><span class="" style="white-space:pre"> </span> layers: map.layers</div>
<div> });</div><div><br></div><div> <span class="" style="white-space:pre"> </span>var legendPanel = new Ext.Panel({</div><div><span class="" style="white-space:pre"> </span>title: "Legend",</div><div><span class="" style="white-space:pre"> </span>xtype: "gx_legendpanel",</div>
<div><span class="" style="white-space:pre"> </span>layerStore: myLayerStore,</div><div><span class="" style="white-space:pre"> </span>region:'west',</div><div><span class="" style="white-space:pre"> </span>width: 100,</div>
<div><span class="" style="white-space:pre"> </span>collapsible: true,</div><div><span class="" style="white-space:pre"> </span>autoScroll: true,</div><div><span class="" style="white-space:pre"> </span>enableDD: true,</div>
<div><span class="" style="white-space:pre"> </span>padding: 5,</div><div><span class="" style="white-space:pre"> </span>rootVisible: false,</div><div><span class="" style="white-space:pre"> </span>lines: false</div><div>
<span class="" style="white-space:pre"> </span>});</div><div><br></div><div><span class="" style="white-space:pre"> </span>var LayerNodeUI = Ext.extend(</div><div><span class="" style="white-space:pre"> </span> GeoExt.tree.LayerNodeUI,</div>
<div><span class="" style="white-space:pre"> </span> new GeoExt.tree.TreeNodeUIEventMixin()</div><div><span class="" style="white-space:pre"> </span>);</div><div> </div><div> var treeConfig = [{</div><div> nodeType: "gx_baselayercontainer",</div>
<div> expanded: true</div><div> }, {</div><div> nodeType: "gx_overlaylayercontainer",</div><div> expanded: true</div><div> }];</div><div><br></div><div> var treePanel = new Ext.tree.TreePanel({</div>
<div> <span class="" style="white-space:pre"> </span>itemId:'navTree',</div><div> region: "east",</div><div> title: "Layers",</div><div> width: 170,</div><div> collapsible: true,</div>
<div> autoScroll: true,</div><div> enableDD: true,</div><div> plugins: [{</div><div> ptype: "gx_treenodecomponent"</div><div> }],</div><div> loader: {</div><div> applyLoader: false,</div>
<div> uiProviders: {"custom_ui": LayerNodeUI}</div><div> },</div><div> root: {children: treeConfig},</div><div> rootVisible: false,</div><div> lines: false</div><div> });</div>
<div> </div><div> var mainPanel = new Ext.Panel({</div><div><span class="" style="white-space:pre"> </span> layout:'border',</div><div><span class="" style="white-space:pre"> </span> bodyBorder: false,</div>
<div><span class="" style="white-space:pre"> </span> renderTo: "MiniMap",</div><div> stateId: "MiniMap",</div><div> height: 400,</div><div> width: 700,</div><div><span class="" style="white-space:pre"> </span>defaults: {</div>
<div><span class="" style="white-space:pre"> </span> split: true,</div><div> autoHide: false,</div><div> useSplitTips: true,</div><div><span class="" style="white-space:pre"> </span>},</div><div>
<span class="" style="white-space:pre"> </span>items: [mapPanel, treePanel, legendPanel]<span class="" style="white-space:pre"> </span></div><div> });</div><div>/****************************************************************************/</div>
</div><div class="gmail_extra"><br><br><div class="gmail_quote">On 21 May 2013 11:52, Luís de Sousa <span dir="ltr"><<a href="mailto:luis.a.de.sousa@gmail.com" target="_blank">luis.a.de.sousa@gmail.com</a>></span> wrote:<br>
<blockquote class="gmail_quote" style="margin:0 0 0 .8ex;border-left:1px #ccc solid;padding-left:1ex"><div dir="ltr">Hello everyone,<div><br></div><div>I'm trying to integrate a Legend panel into an accordion, with the following set up:</div>
<div><br></div><div><div> myLayerStore = new GeoExt.data.LayerStore({</div>
<div><span style="white-space:pre-wrap"> </span> map: myMap,</div><div><span style="white-space:pre-wrap"> </span> layers: myMap.layers</div><div> });</div><div> </div><div> myLegend = new Ext.Panel({ </div>
<div><span style="white-space:pre-wrap"> </span>title: "Legend",</div><div><span style="white-space:pre-wrap"> </span>xtype: "gx_legendpanel",</div><div><span style="white-space:pre-wrap"> </span>layerStore: myLayerStore,</div>
<div><span style="white-space:pre-wrap"> </span>collapsible: true,</div><div><span style="white-space:pre-wrap"> </span>autoScroll: true,</div><div><span style="white-space:pre-wrap"> </span>enableDD: true,</div>
<div><span style="white-space:pre-wrap"> </span>padding: 5,</div><div><span style="white-space:pre-wrap"> </span>rootVisible: false,</div><div><span style="white-space:pre-wrap"> </span>lines: false</div><div>
});</div><div><br></div><div>And then myLegend is included in the items array of the Accordion panel.</div><div><br></div><div>This way the Legend panel doesn't work, it doesn't send any requests to the server and remains blank. What is wrong in this set up?</div>
<div><br></div><div>Thank you,</div><div><br></div><div>Luís</div></div></div>
</blockquote></div><br></div>