Properly Remove LoadMask Once GeoExt MapPanel is Completely Loaded

Question

I would like to have a mask over the whole page which does not get removed until the entire page has completely loaded. More specifically, I have a map created with OpenLayers and GeoExt and I am trying to use an ExtJS loadMask. However, I have not been able to find any other way of doing this other than using a manual setTimeout which I do not want to use. I'd much rather have the mask removed only if the page is completely loaded. I have tried to use the 'loadend' event on the openLayers map as well as windows.onload etc:

My map and loadMask config:

var mask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
    mask.show();

    Ext.onReady(function() {
        var options = {
                controls: [new OpenLayers.Control.Navigation()], 
                maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
                units: 'm',
                allOverlays: false 
        }

        var map = new OpenLayers.Map(options);

        map.events.register("loadend", map , function() {
            mask.hide(); alert('howdy');
        });

var mapPanel = new GeoExt.MapPanel({
            title: "Map",
            map: map,
            id: 'mapPanel',
            layerStore: map.layers,
            //Set the map to be centered at specified      longitude/latitude, transform our layers (SRID=4326) to display properly on Google
            //base layers (SRID=900913)  
            center: new OpenLayers.LonLat(95.20, 30.34).transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913")),
            zoom: 7, 
            region: "center",
            tbar: [measureLength, '-', measureArea, '-'],
            bbar: [
            {
                xtype: "label",
                text: "Scale = 1 : "                        
            }

            ],
            items: [{
                xtype: "gx_zoomslider",
                vertical: true,
                height: 300,
                aggressive: true,
                x: 10,
                y: 20,
                plugins: new GeoExt.ZoomSliderTip()
            }]
        });

It seems this event never happens as I never get an alert message. I really really want to get this working, other attempts were:

window.onload = mask.hide();

after the Ext.onReady and at the end of the </body> tag, but then the mask is hidden way before the map is done loading. Could anyone share some insight, I'd really appreciate it!

So far I have gone with the LoadingPanel solution. trac.osgeo.org/openlayers/wiki/Addins/LoadingPanel This shows a loading mask everytime I zoom in and out of the map layers, which is actually quite nice. I am still curious to know other approaches to this problem anyhow. — elshae

marknatividad marknatividad · Accepted Answer · 2012-07-06T01:38:00

Add the event 'onMapReady' just after the items like so:

onMapReady: function() {
    Ext.getBody().unmask();
}

Properly Remove LoadMask Once GeoExt MapPanel is Completely Loaded

1 Answers