Creating a multy level Layer Tree

[Ferrand Samuel Fonseca Gally]

I´ve been working on making a layer tree using the opengeo suite SDK which pretty much uses geoext. I´ll like to create a little more complex structure in the layer tree. The expected structure is something like:

|overlays|
|        |layer1
|        |layer2
|Group1
|      |layer3
|      |layer4
|      |Subroup1
|      |        |layer5
|      |        |layer6
|      |
|      |Subroup2
|              |layer7
|              |layer8
|background
|          |layer9
|          |layer10

Looking around I´ve found the LayerTreeBuilder unit that seemed to be exactly what I was looking for. Problem now is integrating it on my code!.

so far I´ve tried to use the LayerTreeBuilder in this way :

/**
 * Add all your dependencies here.
 *
 * @require widgets/Viewer.js
 * @require plugins/LayerTree.js
 * @require plugins/OLSource.js
 * @require plugins/OSMSource.js
 * @require plugins/WMSCSource.js
 * @require plugins/ZoomToExtent.js
 * @require plugins/NavigationHistory.js
 * @require plugins/Zoom.js
 * @require plugins/AddLayers.js
 * @require plugins/RemoveLayer.js
 * @require RowExpander.js
 * @require plugins/NestedLayerTree.js
 * @require widgets/CrumbPanel.js
 * @require plugins/ZoomToLayerExtent.js
 * @require widgets/tree/LayerTreeBuilder.js
 */
/* ////////////////////////////////////////////////////////////////
///// modificar la extension del mapa//////////
////////////////////////////////////////////////////////////////
var googleProj = new OpenLayers.Projection("EPSG:900913");
var extent = new OpenLayers.Bounds(-120,13,-84,34);
var proj4326 = new OpenLayers.Projection("EPSG:4326");
extent.transform(proj4326, googleProj);
////////////////////////////////////////////////////////////////// */
 
 
 
var app = new gxp.Viewer({
    portalConfig: {
        layout: "border",
        region: "center",
        items: [{
            id: "centerpanel",
            xtype: "panel",
            layout: "fit",
            region: "center",
            border: false,
            items: ["mymap"]
        }, {
	    id:"tree",
	    xtype:"LayerTreeBuilder",
	    region: "east",
	    width: 250,
	    autoScroll: true,
	    rootVisible: false,
	    lines: false,
	    // widget custom properties
	    wmsLegendNodes: true,
	    vectorLegendNodes: true
	}],
        bbar: {id: "mybbar"}
    },
    
    // configuration of all tool plugins for this application
    tools: [{
        ptype: "gxp_zoomtoextent",
        actionTarget: "map.tbar"
    }, {
        ptype: "gxp_zoom",
        actionTarget: "map.tbar"
    }, {
	ptype: "gxp_zoomtolayerextent",
		actionTarget: "map.tbar"
	} ],
    
    // layer sources
    sources: {
        local: {
            ptype: "gxp_wmscsource",
            url: "/geoserver/wms",
            version: "1.1.1"
        },
        osm: {
            ptype: "gxp_osmsource"
        }
    },
    
    // map and layers
    map: {
        id: "mymap", // id needed to reference map in portalConfig above
        title: "Mapa",
        projection: "EPSG:900913",
		numZoomLevels: 15,
        //center: [-10764594.758211, 4523072.3184791],
		restrictedExtent: [-13358338,1459732,-9350837,4028802],
        zoom: 4,
		//maxExtent: 
        layers: [{
            source: "osm",
            name: "mapnik",
            group: "background"
        }, {
	    source:"local",
	    name:"PPR:Sitios_Agua",
	    group:"G_1/SG_1",
	    visibility:"true",
	    selected:"false"
	}   ],
		
        items: [{
            xtype: "gx_zoomslider",
            vertical: true,
            height: 100
        }]
    }

});

result of that code is :

1. Uncaught TypeError: undefined is not a function ext-all.js:7
1. createext-all.js:7
2. Ext.Container.Ext.extend.createComponentext-all.js:7
3. Ext.Container.Ext.extend.lookupComponentext-all.js:7
4. Ext.Container.Ext.extend.addext-all.js:7
5. (anonymous function)ext-all.js:7
6. Ext.apply.eachext-base.js:7
7. Ext.Container.Ext.extend.addext-all.js:7
8. Ext.Container.Ext.extend.initComponentext-all.js:7
9. Ext.Viewport.Ext.extend.initComponentext-all.js:7
10. Ext.Componentext-all.js:7
11. Lext-base.js:7
12. Lext-base.js:7
13. Lext-base.js:7
14. createext-all.js:7
15. gxp.Viewer.Ext.extend.initPortalViewer.js:562
16. (anonymous function)Viewer.js:391
17. h.Event.fireext-all.js:7
18. v.onDocumentReadyext-all.js:7
19. (anonymous function)Viewer.js:390
20. (anonymous function)util.js:71

I´m pretty new with javascript and to be honest I have not idea what am I doing wrong so any help will be apreciated!!