GeoExt2 How I make subnodes in Layer Tree

Question

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 ?

Answer 1

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.