[GIS] GeoExt2 How I make subnodes in Layer Tree

ext-jsgeoext

I'm loading WMS layers to OpenLayers map in the following way :

Here is a JSFiddle example :
http://jsfiddle.net/Alophind/9r95T/

 function LoadLayers(data) {
    jQuery.each(data, function (i, val) {
        if (val.layer != "") {
            var layer = new OpenLayers.Layer.WMS(val.name, geoserver,
                    {
                        LAYERS: val.layer,
                        STYLES: '',
                        format: format,
                        tiled: true,
                        transparent: true,
                        tilesOrigin: map.maxExtent.left + ',' + map.maxExtent.bottom
                    },
                    {
                        buffer: 0,
                        visibility: false,
                        displayOutsideMaxExtent: false,
                        isBaseLayer: false,
                        yx: { 'EPSG:4326': true }
                    }
                );
            arrLayers.push(layer);
        }
    });
}

and I instantiate a GeoExt tree like this :

mapPanel = Ext.create('GeoExt.panel.Map', {
        border: true,
        region: "center",
        map: map,
        layers: arrLayers
    });

    var store = Ext.create('Ext.data.TreeStore', {
        model: "GeoExt.data.LayerTreeModel",
        root: {
            expanded: true,
            children: [
                {
                    plugins: ['gx_overlaylayercontainer'],
                    expanded: true
                }
            ]
        }
    });

    tree = Ext.create('GeoExt.tree.Panel', {
        border: true,
        region: "west",
        title: "Layers",
        width: 200,
        split: true,
        store: store,
        collapsible: true,
        collapseMode: "mini",
        autoScroll: true,
        //store: store,
        rootVisible: false,
        lines: false
    });

I want to be able to put the layers in the tree as subnodes . for example :

Root
|
|-Buildings
|     |---Layer 1
|
|-Cars
|     |--- Layer 3

How can I do it ?

I've managed to add the following code manullay :

tree.getRootNode().appendChild({
            text: "Root,
            group: true,            
            children: [
                    {
                        text: "Buildings",
                        layer: "MyTest:BuildingsSHP",
                        leaf: true,
                        checked: false,
                        children: [],
                        nodeType: "gx_layer"
                    },
                    {
                        "text": "Cars",
                        "layer": "MyTest:CarsSHP",
                        "leaf": true,
                        "checked": false,
                        "children": [],
                        "nodeType": "gx_layer"
                    }
                ],
            expanded: true
        });

And I do get new nodes in the tree…
But when I click the check box , nothing happens (they don't show in map and not added to the legend panel)

What else am I missing ?

Best Answer

To create subnodes set leaf to false:

{
        text: "Root,
        group: true,            
        children: [{
                    text: Buildings,
                    leaf: false,
                    expanded: true,
                    children: [{
                        text: "Buildings Layer 1",
                        layer: "MyTest:BuildingsSHP",
                        leaf: true,
                        checked: false,
                        children: [],
                        nodeType: "gx_layer"
                    }],
                },{
                    "text": "Cars",
                    "layer": "MyTest:CarsSHP",
                    "leaf": true,
                    "checked": false,
                    "children": [],
                    "nodeType": "gx_layer"
                }
            ],
        expanded: true
    }

All layers in the tree must be firsthand added to the map, before you can interact with them. The layer name must correspond to the node name in the tree.

Related Question