openlayers 2 - Adding multiple nested nodes in GeoExt?

I have following codes, but i want to add severel parent>child>chill>child>child (4 level inside) nodes with all check box options (for user choice) in the tree panel, in fact sum of all these (parent + child) will be of around 800 entry (like tree panel of http://map.rostmuseum.ru/) again i want to load childs to be loaded as a part of the grand parent of all subsequent parent and childs (i think i will do it by including cql parameter included url from my geoserevr , is not it will be the best way) as overlay.

    var mapPanel;
    Ext.onReady(function() {
    // create a map panel with some layers that we will show in our layer tree
    // below.
    mapPanel = new GeoExt.MapPanel({

    border: true,
    region: "center",
    // we do not want all overlays, to try the OverlayLayerContainer
    map: new OpenLayers.Map({allOverlays: false}),
    center: [90.04142, 23.77647],
    zoom: 7,
    layers: [
    new OpenLayers.Layer.WMS("Bangladesh",
    "http://localhost:8080/geoserver/cite/wms", {
    layers: "thana"

    }, {
    buffer: 0,
    visibility: false
    }
    ),
    /* new OpenLayers.Layer.WMS("Tasmania State Boundaries",
    "http://demo.opengeo.org/geoserver/wms", {
    layers: "topp:tasmania_state_boundaries"
    }, {
    buffer: 0

    }
    ),*/
    /* new OpenLayers.Layer.WMS("Water",
    "http://demo.opengeo.org/geoserver/wms", {
    layers: "topp:tasmania_water_bodies",
    transparent: true,
    format: "image/gif"
    }, {
    isBaseLayer: false,
    buffer: 0

    }
    ),*/
    new OpenLayers.Layer.WMS("Rivers",
    "http://localhost:8080/geoserver/cite/wms", {
    layers: "cite:river",
    transparent: true,
    format: "image/gif"
    }, {
    isBaseLayer:true,
    buffer: 0

    }
    ),
    new OpenLayers.Layer.WMS("Roads",
    "http://localhost:8080/geoserver/cite/wms", {
    layers: "cite:roadnetwork",
    transparent: true,
    format: "image/gif"
    }, {
    isBaseLayer: false,
    buffer: 0

    }
    ),
    // create a group layer (with several layers in the "layers" param)
    // to show how the LayerParamLoader works
    new OpenLayers.Layer.WMS("Bangladesh (Boundaries)",
    "http://localhost:8080/geoserver/it.geosolutions/wms", {
    layers: [
    "internationalboundary",
    "divisionalboundary",
    "districtbounday",

    "thanaboundary"
    ],
    transparent: true,
    format: "image/gif"
    }, {
    isBaseLayer: false,
    buffer: 0,
    // exclude this layer from layer container nodes
    displayInLayerSwitcher: false,
    visibility: false

    }
    )
    ]
    });

    // create our own layer node UI class, using the RadioButtonMixin
    var LayerNodeUI = Ext.extend(
    GeoExt.tree.LayerNodeUI, new GeoExt.tree.RadioButtonMixin()
    );


    // using OpenLayers.Format.JSON to create a nice formatted string of the
    // configuration for editing it in the UI
    var treeConfig = new OpenLayers.Format.JSON().write([{
    nodeType: "gx_baselayercontainer"
    }, {
    nodeType: "gx_overlaylayercontainer",
    expanded: true,
    // render the nodes inside this container with a radio button,
    // and assign them the group "foo".
    loader: {

    baseAttrs: {
    radioGroup: "foo",
    uiProvider: "use_radio"
    }
    }
    }, {
    nodeType: "gx_layer",
    layer: "Bangladesh (Boundaries)",
    isLeaf: false,
    // create subnodes for the layers in the LAYERS param. If we assign

    // a loader to a LayerNode and do not provide a loader class, a
    // LayerParamLoader will be assumed.
    loader: {
    param: "LAYERS"
    }
    }], true);

    // create the tree with the configuration from above
    var tree = new Ext.tree.TreePanel({
    border: true,

    region: "west",
    title: "Layers",
    width: 200,
    split: true,
    collapsible: true,
    collapseMode: "mini",
    autoScroll: true,
    loader: new Ext.tree.TreeLoader({
    // applyLoader has to be set to false to not interfer with loaders
    // of nodes further down the tree hierarchy

    applyLoader: false,
    uiProviders: {
    "use_radio": LayerNodeUI
    }
    }),
    root: {
    nodeType: "async",
    // the children property of an Ext.tree.AsyncTreeNode is used to
    // provide an initial set of layer nodes. We use the treeConfig
    // from above, that we created with OpenLayers.Format.JSON.write.



    //work 
    children: Ext.decode(treeConfig)


    },
    listeners: {
    "radiochange": function(node){
    alert(node.layer.name + " is now the the active layer.");

    }
    },
    rootVisible: false,
    lines: false,
    bbar: [{
    text: "Show/Edit Tree Config",
    handler: function() {
    treeConfigWin.show();
    Ext.getCmp("treeconfig").setValue(treeConfig);
    }

    }]
    });

    // dialog for editing the tree configuration
    var treeConfigWin = new Ext.Window({
    layout: "fit",
    hideBorders: true,
    closeAction: "hide",
    width: 300,
    height: 400,

    title: "Tree Configuration",
    items: [{
    xtype: "form",
    layout: "fit",
    items: [{
    id: "treeconfig",
    xtype: "textarea"
    }],
    buttons: [{
    text: "Save",

    handler: function() {
    var value = Ext.getCmp("treeconfig").getValue()
    try {
    var root = tree.getRootNode();
    root.attributes.children = Ext.decode(value);
    tree.getLoader().load(root);
    } catch(e) {
    alert("Invalid JSON");
    return;
    }

    treeConfig = value;
    treeConfigWin.hide();
    }
    }, {
    text: "Cancel",
    handler: function() {
    treeConfigWin.hide();
    }
    }]
    }]

    });

    new Ext.Viewport({
    layout: "fit",
    hideBorders: true,
    items: {
    layout: "border",
    deferredRender: false,
    items: [mapPanel, tree, {
    contentEl: "desc",

    region: "east",
    bodyStyle: {"padding": "5px"},
    collapsible: true,
    collapseMode: "mini",
    split: true,
    width: 200,
    title: "Catalog"
    }]
    }
    });

    });

Can you guide me?