GeoExt Map with custon Layerswitcher and Layertree showing only Baselayer or Overlays

HTML

<script src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css">
<link rel="stylesheet" href="http://extjs.cachefly.net/ext-3.4.0/examples/shared/examples.css">
<script src="http://www.openlayers.org/api/2.11/OpenLayers.js"></script>
<script src="http://api.geoext.org/1.1/script/GeoExt.js"></script>
<div>
     <h2>GeoExt Map with OSM BaseLayer and WMS Overlay</h2>
Layerswitcher showing only Baselayer and GeoExt-Layertree showing only Overlays
    <div/>
    <br />
    <div id="mainpanel"></div>

CSS

.dataLbl, .dataLayersDiv
    {
        display:none;
        
    }

JavaScript

var mapPanel, mainPanel;

Ext.onReady(function () {

    var map = new OpenLayers.Map({
        maxExtent: new OpenLayers.Bounds(1247348.5486233, -4263307.2348958, 4260801.9513187, -2448386.4355452)
    });
    map.addControl(new OpenLayers.Control.LayerSwitcher());

    var osm_layer = new OpenLayers.Layer.OSM();

var ocm=
new OpenLayers.Layer.OSM("OpenCycleMap",
  ["http://a.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
   "http://b.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png",
   "http://c.tile.opencyclemap.org/cycle/${z}/${x}/${y}.png"]);


    var wmsLayer1 = new OpenLayers.Layer.WMS(
        "WMS Layer South Africa",
        "http://gis.lib.virginia.edu:8080/geoserver/South_Africa/wms", {
        layers: 'South_Africa:ponet_polygon',
        transparent: true
    }, {
        isBaseLayer: false
        //,displayOutsideMaxExtent: true
    });

    var wmsLayer2 = new OpenLayers.Layer.WMS(
        "WMS Layer South Africa",
        "http://gis.lib.virginia.edu:8080/geoserver/South_Africa/wms", {
        layers: 'South_Africa:popoint_point',
        transparent: true
    }, {
        isBaseLayer: false
        //, displayOutsideMaxExtent: true
    });





    map.addLayers([osm_layer, ocm, wmsLayer1, wmsLayer2]);



    // create map panel
    mapPanel = new GeoExt.MapPanel({
        title: "Map",
        region: "center",
        height: 400,
        width: 300,
        map: map,
        center: new OpenLayers.LonLat(24.740278910086, -28.844323887404).transform(
        new OpenLayers.Projection("EPSG:4326"),
        map.getProjectionObject()),
        zoom: 5
    });


    var layerList = [{
        nodeType: "gx_overlaylayercontainer",
        text: "Overlay Layers",
        expanded: true
    }];
    var tree = new Ext.tree.TreePanel({
        title: "Layer",
        region: "west",
        loader: new Ext.tree.TreeLoader({
            applyLoader: true
        }),
        root: {
            children: layerList
        },
        rootVisible:...