OpenLayers Definition in GeoExplorer/GeoExt

Question

I'd like to know how to define 'Open Street Map' as basemap in the function GeoExplorer.js

The createLayout function is defined as :

createLayout:function(){
        this.map=new OpenLayers.Map({
            ....
        });

            layers: [

                //=========base layer

                new OpenLayers.Layer.WMS(
                    "Global Imagery (vmap) [Online]",
                    "http://labs.metacarta.com/wms/vmap0",
                    {
                        layers: "basic",
                        transparent: "true",
                        format: "image/png"
                    },
                    {isBaseLayer: true, visibility: false}
                ),
                new OpenLayers.Layer.WMS("Global Imagery (OpenGeo) [Online]",
                    "http://maps.opengeo.org/geowebcache/service/wms", {
                        layers: "bluemarble"
                    },{
                        //buffer: 0,
                        isBaseLayer: true,
                        visibility: false
                    }
                )
            ]
        });

Instead of 'Global Imagery' base map, I'd like to use 'OpenStreetMap' or 'Google Maps'.

---

I edited advice from the answer(s) into this :

this.mapPanel=new GeoExt.MapPanel({
            layout:"anchor",border:true,region:"center",
            map:this.map,
            center:mapConfig.center&&new OpenLayers.LonLat(mapConfig.center[0],mapConfig.center[1]),
            zoom:mapConfig.zoom,
            items:[{
                xtype:"gx_zoomslider",
                vertical:true,height:100,
                plugins:new GeoExt.ZoomSliderTip({template:"<div>Zoom Level: {zoom}</div>"})},
                this.createMapOverlay()
            ],
            layers: [


//====base layer=====
                    new OpenLayers.Layer.OSM("OpenLayers"),
//=====overlays=====

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


            ]
        });

However, No map component is showing anymore. the page is just empty.

Do I need to change anything apart from the the basemap definition?

---

After the answer by @g07kore, I integrated in my main page

<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false"></script>

Then in GeoExplorer.js, the createLayout function is :

createLayout:function(){
        this.map=new OpenLayers.Map({
            theme:null,
            allOverlays:false,controls:[
                new OpenLayers.Control.PanPanel(),
                new OpenLayers.Control.ZoomPanel()
            ],
            projection:this.initialConfig.map.projection,
            units:this.initialConfig.map.units,
            maxResolution:this.initialConfig.map.maxResolution,
            maxExtent:this.initialConfig.map.maxExtent&&OpenLayers.Bounds.fromArray(this.initialConfig.map.maxExtent),
            numZoomLevels:this.initialConfig.map.numZoomLevels||20
        });
        this.createFeatureLayer();
        this.map.addLayer(this.featureLayer);
        var mapConfig=this.initialConfig.map||{};



        var googleBaseMap = new OpenLayers.Layer.Google("Google Satellite", {'type' : google.maps.MapTypeId.HYBRID});  

        this.mapPanel=new GeoExt.MapPanel({
            layout:"anchor",border:true,region:"center",
            map:this.map,
            center:mapConfig.center&&new OpenLayers.LonLat(mapConfig.center[0],mapConfig.center[1]),
            zoom:mapConfig.zoom,
            items:[{
                xtype:"gx_zoomslider",
                vertical:true,height:100,
                plugins:new GeoExt.ZoomSliderTip({template:"<div>Zoom Level: {zoom}</div>"})},
                this.createMapOverlay()
            ],


             layers: [googleBaseMap];

});

However, no map component is showing, I don't know if the basemap definition is wrong .

Answer 1

Just this

  new OpenLayers.Layer.OSM("OpenLayers");

It is defined as a baseLayer by default.

Answer 2

Google would be

new OpenLayers.Layer.Google("Google Satellite", {'type' : google.maps.MapTypeId.HYBRID});

But honestly i would change the codes a bit. I recommend to declare your Basemaps outside of the GeoExt elements. Something like

var googleBaseMap = new OpenLayers.Layer.Google("Google Satellite", {'type' : google.maps.MapTypeId.HYBRID});    

and add layers like

layers: [googleBaseMap, someOtherMap, anotherMap];