Ext.onReady(function() {
        var map = new OpenLayers.Map('map',{
                projection: "EPSG:4326",  
                maxExtent: new OpenLayers.Bounds(-75.692, 7.107, -75.331, 7.333),
                units: "dd"                                
                });
                
           var EspirituSanto_10000 = new OpenLayers.Layer.MapServer( "ImagenSatelite", 
                        "http://localhost/cgi-bin/mapserv.exe?mode=map&map=/ms4w/apps/es/map/infobase.map", 
                        {layers: 'EspirituSanto_10000'}, 
                        {isBaseLayer: true,buffer: 1,  gutter:0} ); 
                map.addLayer(EspirituSanto_10000);

           var Areaconstruida = new OpenLayers.Layer.MapServer( "Areaconstruida", 
                        "http://localhost/cgi-bin/mapserv.exe?mode=map&map=/ms4w/apps/es/map/infobase.map", 
                        {layers: 'Areaconstruida',transparent: false, format: "image/png"}, 
                        {isBaseLayer: false,buffer: 0, gutter:0, visibility:false} );
           map.addLayer(Areaconstruida);

           var Drenajedoble = new OpenLayers.Layer.MapServer( "Doble", 
           "http://localhost/cgi-bin/mapserv.exe?mode=map&map=/ms4w/apps/es/map/infobase.map", 
           {layers: 'Drenajedoble',transparent: false, format: "image/png"}, 
           {isBaseLayer: false,buffer: 0, gutter:0, visibility:false} );                
           map.addLayer(Drenajedoble);                

        var mapPanel = new GeoExt.MapPanel({
            region: 'center',
            map: map,
            tbar: [],
                        
        });                                
                
                var layerList = new GeoExt.tree.LayerContainer({
                    text: 'All Layers',
                    layerStore: mapPanel.layers,
                    leaf: false,
                    expanded: true
                });
                
                var layerTree = new Ext.tree.TreePanel({
                    title: 'Map Layers',
                        region: 'east',
                    root: layerList
                });
        
        var mainPanel = new Ext.Panel({
        title: 'Menu principal',                
        layout: 'border',                
        items: [mapPanel, layerTree],
        width:1250,
        height:550,
        renderTo:'map'
    });
        if (!map.getCenter()) 
                        map.zoomToMaxExtent();


                        var length = new OpenLayers.Control.Measure(OpenLayers.Handler.Path, {
                                        eventListeners: {
                                                measure: function(evt) {
                                                        alert("La Distancia es " + evt.measure + evt.units);
                                                }
                                        }
                        });

                        var area = new OpenLayers.Control.Measure(OpenLayers.Handler.Polygon, {
                                        eventListeners: {
                                                measure: function(evt) {
                                                        alert("El area es " + evt.measure + evt.units);
                                                }
                                        }
                        });

                        var zoom = new OpenLayers.Control.ZoomBox({map:map});
                        
                        mapPanel.map.addControl(zoom);
                        mapPanel.map.addControl(length);
                        mapPanel.map.addControl(area);

                        var toggleGroup = "measure controls";
                        
                        var lengthButton = new Ext.Button({
                        text: 'Medir dist',
               icon: 'images/length.png',
               cls:'x-btn-text-icon',                        
                        enableToggle: true,
                        toggleGroup: toggleGroup,
                                handler: function(toggled){
                                        if (toggled) {
                                                length.activate();
                                        } else {
                                                length.deactivate();
                                        }
                                }                        
                        });

                        var area = new Ext.Button({
                        text: 'Measure Area',
               icon: 'images/area.png',
               cls:'x-btn-text-icon',                        
                        enableToggle: true,
                        toggleGroup: toggleGroup,
                                handler: function(toggled){
                                        if (toggled) {
                                                area.activate();
                                        } else {
                                                area.deactivate();
                                        }
                                }
                        });

                        var zoom = new Ext.Button({
                        text: 'Zoom',
               icon: 'images/filefind.png',
               cls:'x-btn-text-icon',
           enableToggle: true,
                   toggleGroup: toggleGroup,
           handler: function(toggled){
               if (toggled.pressed) {
                   zoom.activate();
               } else {
                   zoom.deactivate();
               }
           }
       });
                        
mapPanel.getTopToolbar().addButton(zoom);                
mapPanel.getTopToolbar().addButton(lengthButton);                
mapPanel.getTopToolbar().addButton(area);                
                
});