Apend child to a layertree with nodeType: "gx_layer"

Question

Im building an application with geoext and opengeo suite SDK. I´m trying to create a layer tree with some "grouped" layers like the last node here I saw somewhere that I should set the node Type to "gx_layer" to get that effect, but if I do that then the entire tree won’t load. I only get the root node and when I click on it , the icon changes to the “loading” image, but then nothing happens

Answer 1

in ext & geoext (dont know much about opengeo, I just know they are pretty similar) you can manually (or programmatically) add layers to the treestore in groups like this

...{
                    text: "Natural Dangers",
                    leaf: false,
                    expanded: true,
                    children: [{
                        text: risk_erosion.name,
                        layer: risk_erosion,
                        leaf: true,
                        checked: false,
                        children: [],
                        nodeType: "gx_overlaylayercontainer"
                    },
                    {
                        text: risk_sality.name,
                        layer: risk_sality,
                        leaf: true,
                        checked: false,
                        children: [],
                        nodeType: "gx_overlaylayercontainer"
                    },
                    {
                        text: risk_nitrate.name,
                        layer: risk_nitrate,
                        leaf: true,
                        checked: false,
                        children: [],
                        nodeType: "gx_overlaylayercontainer"
                    },
                    {
                        text: risk_esair.name,
                        layer: risk_esair,
                        leaf: true,
                        checked: false,
                        children: [],
                        nodeType: "gx_overlaylayercontainer"
                    }],
                }...

And in the actuall tree to add an event like this

        checkchange: {
        fn: function (record, checked, opts) {
            record.data.layer.setVisibility(checked)
             }
        }

To control the layer visibility

ps: each layer is a OpenLayers.Layer.WMS layer

Answer 2

Define new geoext layer container (this solution can also be applied by specifying filter directly to gx_overlaylayercontainer but dont have example code).

Ext.define('GSIP.core.geoext.DynamicLayerContainer', {
    extend: 'GeoExt.tree.LayerContainer',
    alias: 'plugin.gsip_dynamiclayercontainer',

    /**
     * The default text for the target node.
     *
     * @private
     */
    defaultText: 'Warstwy dynamiczne',

    /**
     * @private
     */
    init: function(target) {
        var me = this;
            me.loader = Ext.create('GeoExt.tree.LayerLoader',{
                filter: function(record) {
                    var layer = record.getLayer();
                    return layer.layerCreationType == 'DYNAMIC';
                }
            });

        me.callParent(arguments);
    }
});

In this class set filter method that will filter all the map layers to find the ones you want to put into group. The filter method should return true if the layer matches filter or false otherwise. In above example i filter all the layers that have attribute layerCreationType == 'DYNAMIC'.

Then after you create layer if you want it to be inside the new layergroup append to it the filter attribute like this:

 var layer = new OpenLayers.Layer.WMS()
layer.layerCreationType = 'DYNAMIC';

To add the new plugin into layer tree you have 2 possibilities. First is to create your tree at initComponent:

this.layerStore = Ext.create('GeoExt.data.LayerStore',{
            map:this.map
        });

var treestore = Ext.create('Ext.data.TreeStore', {
                model: 'GeoExt.data.LayerTreeModel',
                root: {
                    expanded: true,
                    children: [
                        {
                            plugins: ['gsip_dynamiclayercontainer'],
                            loader: {store: this.layerStore},
                            expanded: true,
                            text:'Warstwy',
                            iconCls:'icon-layers-map-icon',
                            qtip:''
                        }

                    ]
                }
            });

or append the group node after tree was created like this:

addDynamicLayersGroup:function() {
        var root = this.getRootNode();
        this.dynamic = root.appendChild({
            plugins: [{
                //ptype: 'gx_layercontainer',
                ptype: 'gsip_dynamiclayercontainer',
                store: this.map.layers
            }],
            leaf:false,
            expanded:true,
            text:'Warstwy dynamiczne',
            gsip:{
                isGroup:true
            },
            layerId:'dynamic_group',
            checked:true
        });
    },