<div dir="ltr">Dear all,<div><br></div><div style>I have done a good deal of testing on the Legend object and it seems to function only in this unique setting:</div><div style>a) it must added in line to a panel with layout defined as 'border';</div>
<div style>b) a MapPanel object must be also part of the items of this 'border' layout panel.</div><div style><br></div><div style>Although I don't recall seeing an example with a different setting, I doubt the Legend object can be this restrictive. Thus I'd request again for you to look into my code to check what may be wrong.</div>
<div style><br></div><div style>Thank you,</div><div style><br></div><div style>Luís </div></div><div class="gmail_extra"><br><br><div class="gmail_quote">On 22 May 2013 10:06, 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"><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 style="white-space:pre-wrap"> </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 style="white-space:pre-wrap"> </span>var LayerNodeUI = Ext.extend(</div><div><span style="white-space:pre-wrap"> </span> GeoExt.tree.LayerNodeUI,</div>
<div><span style="white-space:pre-wrap"> </span> new GeoExt.tree.TreeNodeUIEventMixin()</div><div><span style="white-space:pre-wrap"> </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 style="white-space:pre-wrap"> </span>itemId:'navTree',</div><div> region: "east",</div><div> title: "Layers",</div><div> width: 170,</div><div class="im"><div>
collapsible: true,</div>
<div> autoScroll: true,</div><div> enableDD: true,</div></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 class="im"><div> rootVisible: false,</div><div> lines: false</div>
<div> });</div>
<div> </div></div><div> var mainPanel = new Ext.Panel({</div><div><span style="white-space:pre-wrap"> </span> layout:'border',</div><div><span style="white-space:pre-wrap"> </span> bodyBorder: false,</div>
<div><span style="white-space:pre-wrap"> </span> renderTo: "MiniMap",</div><div> stateId: "MiniMap",</div><div> height: 400,</div><div> width: 700,</div><div><span style="white-space:pre-wrap"> </span>defaults: {</div>
<div><span style="white-space:pre-wrap"> </span> split: true,</div><div> autoHide: false,</div><div> useSplitTips: true,</div><div><span style="white-space:pre-wrap"> </span>},</div><div>
<span style="white-space:pre-wrap"> </span>items: [mapPanel, treePanel,</div><div><span style="white-space:pre-wrap"> </span>{</div><div class="im"><div><span style="white-space:pre-wrap"> </span>title: "Legend",</div>
<div><span style="white-space:pre-wrap"> </span>xtype: "gx_legendpanel",</div></div><div><span style="white-space:pre-wrap"> </span>region:'west',</div><div><span style="white-space:pre-wrap"> </span>width: 100,</div>
<div class="im">
<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><span style="white-space:pre-wrap"> </span>}]<span style="white-space:pre-wrap"> </span></div><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 style="white-space:pre-wrap"> </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 style="white-space:pre-wrap"> </span>var myLayerStore = new GeoExt.data.LayerStore({</div><div><span style="white-space:pre-wrap"> </span> map: map,</div><div><span style="white-space:pre-wrap"> </span> layers: map.layers</div>
<div> });</div><div><br></div><div> <span style="white-space:pre-wrap"> </span>var legendPanel = new Ext.Panel({</div><div class="im"><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><div><span style="white-space:pre-wrap"> </span>region:'west',</div><div><span style="white-space:pre-wrap"> </span>width: 100,</div>
<div class="im">
<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>
<span style="white-space:pre-wrap"> </span>});</div><div><br></div></div><div><span style="white-space:pre-wrap"> </span>var LayerNodeUI = Ext.extend(</div><div><span style="white-space:pre-wrap"> </span> GeoExt.tree.LayerNodeUI,</div>
<div><span style="white-space:pre-wrap"> </span> new GeoExt.tree.TreeNodeUIEventMixin()</div><div><span style="white-space:pre-wrap"> </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 style="white-space:pre-wrap"> </span>itemId:'navTree',</div><div> region: "east",</div><div> title: "Layers",</div><div> width: 170,</div><div class="im"><div>
collapsible: true,</div>
<div> autoScroll: true,</div><div> enableDD: true,</div></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 class="im"><div> rootVisible: false,</div><div> lines: false</div>
<div> });</div>
<div> </div></div><div> var mainPanel = new Ext.Panel({</div><div><span style="white-space:pre-wrap"> </span> layout:'border',</div><div><span style="white-space:pre-wrap"> </span> bodyBorder: false,</div>
<div><span style="white-space:pre-wrap"> </span> renderTo: "MiniMap",</div><div> stateId: "MiniMap",</div><div> height: 400,</div><div> width: 700,</div><div><span style="white-space:pre-wrap"> </span>defaults: {</div>
<div><span style="white-space:pre-wrap"> </span> split: true,</div><div> autoHide: false,</div><div> useSplitTips: true,</div><div><span style="white-space:pre-wrap"> </span>},</div><div>
<span style="white-space:pre-wrap"> </span>items: [mapPanel, treePanel, legendPanel]<span style="white-space:pre-wrap"> </span></div><div> });</div><div>/****************************************************************************/</div>
</div><div class="HOEnZb"><div class="h5"><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>
</div></div></blockquote></div><br></div>