[Users] How to add multiple components to a tree store node

[Juliette Fabre]

Thank you Christian, that is exactly what I needed!

Here is my code:

plugins: [{
     ptype: "gx_overlaylayercontainer",
     loader: {
         createNode: function(attr) {
             attr.component =
             // Add a WMS legend to each node created
             {
                 xtype: 'container',
                 layout: 'vbox',
                 height: 60,
                 items: [
                 {
                     xtype: "gx_wmslegend",
                     layerRecord: mapPanel.layers.getByLayer(attr.layer),
                     showTitle: false,
                     flex: 1,
                     baseParams: {
                         // Overrides gif format that is ugly in this case
                         FORMAT: 'image/png',
                         LEGEND_OPTIONS: 'forceLabels:off'
                     }
                 },
                 // Add an opacity slider
                 {
                     xtype: "gx_opacityslider",
                     layer: attr.layer,
                     vertical: false,
                     value: 100,
                     width: 200,
                     aggressive: true,
                     flex: 1,
                     listeners: {
                         change: function(slider, val) {
                             attr.layer.setOpacity(val/100);
                         }
                     }
                 }]
             };
             return 
GeoExt.tree.LayerLoader.prototype.createNode.call(this, attr);
         }
     }
}]



Cheers,

Juliette



Le 06/01/2015 18:46, Christian Mayer a écrit :
> Hi Juliette,
>
> in general you can only pass one component to "attr.component" as the
> name indicates to. But if you wrap your components (legend, slider,
> etc.) in a parent container you can easily add as much components as you
> want. Here is some code (untested) which gives you an idea how to
> tackles this
>
> ...
>
> attr.component = {
>     xtype: 'container',
>     layout: 'vbox', //or whatever layout you need
>     items: [
>       // add your components (legend and slider) here
>     ]
> }
>
> ...
>
>
> Hope this helps.
>
> Cheers,
> Chris
>
>
> Am 06.01.2015 um 17:47 schrieb Juliette Fabre:
>> Thanks, no I didn't try, but actually I don't really see how I have to
>> do it. Would you have some code samples so that I can try to copy what
>> you did?
>>
>>
>> Le 06/01/2015 16:00, dustin.r.blankenship at accenturefederal.com a écrit :
>>> Have you tried extending the LayerLoader'?
>>>
>>> extend: 'GeoExt.tree.LayerLoader',
>>>
>>>        createNode: function(attr) {
>>>
>>> I had to extend the layer container and use a custom loader. This allowed me to add text and an icon to the node.
>>>
>>>
>>> -----Original Message-----
>>> From: users-bounces at geoext.org [mailto:users-bounces at geoext.org] On Behalf Of Juliette Fabre
>>> Sent: Tuesday, January 06, 2015 3:20 AM
>>> To: users at geoext.org
>>> Subject: [Users] How to add multiple components to a tree store node
>>>
>>> Hello,
>>>
>>> I'm trying to add a WMS legend AND an opacity slider to each node of a tree store.
>>> I can add each component separately, but not together ...
>>>
>>> It could be something like this, but attr.component = [{...}, {}] raises errors .. :
>>>
>>> var tree_store = Ext.create('Ext.data.TreeStore', {
>>>         model: 'GeoExt.data.LayerTreeModel',
>>>         root: {
>>>             expanded: true,
>>>             children: [
>>>             {
>>>                 // Base layers
>>>                 plugins: ['gx_baselayercontainer'],
>>>                 expanded: true,
>>>                 text: "Base maps"
>>>             },
>>>             {
>>>                 // Overlays
>>>                 plugins: [{
>>>                     ptype: "gx_overlaylayercontainer",
>>>                     loader: {
>>>                         createNode: function(attr) {
>>>                             attr.component =
>>>                             [
>>>                             // Add a WMS legend to each node created
>>>                             {
>>>                                 xtype: "gx_wmslegend",
>>>                                 layerRecord:
>>> mapPanel.layers.getByLayer(attr.layer),
>>>                                 showTitle: false,
>>>                                 baseParams: {
>>>                                     // Overrides gif format that is ugly in this case
>>>                                     FORMAT: 'image/png',
>>>                                     LEGEND_OPTIONS: 'forceLabels:off'
>>>                                 },
>>>                             },
>>>                             // Add an opacity slider
>>>                             {
>>>                                 xtype: "gx_opacityslider",
>>>                                 layer: attr.layer,
>>>                                 vertical: false,
>>>                                 value: 100,
>>>                                 //x: 100,
>>>                                 //y: 100,
>>>                                 width: 200,
>>>                                 aggressive: true,
>>>                                 listeners: {
>>>                                     change: function(slider, val) {
>>>                                         attr.layer.setOpacity(val/100);
>>>                                     }
>>>                                 }
>>>                             }];
>>>                             return
>>> GeoExt.tree.LayerLoader.prototype.createNode.call(this, attr);
>>>                         }
>>>                     }
>>>                 }],
>>>                 expanded: true,
>>>                 text: "Layers",
>>>             }]
>>>         }
>>> });
>>>
>>> Any idea?
>>>
>>> Thanks,
>>>
>>> Juliette
>>>
>>>