完全加载GeoExt MapPanel后正确删除LoadMask

时间:2011-10-28 19:19:45

标签: javascript javascript-events extjs openlayers

我想在整个页面上有一个掩码,在整个页面完全加载之前不会被删除。更具体地说,我有一个使用OpenLayers和GeoExt创建的地图,我正在尝试使用ExtJS loadMask。但是,除了使用我不想使用的手动setTimeout之外,我还没有找到任何其他方法。我只是在页面完全加载时才删除掩码。我试图在openLayers地图以及windows.onload等上使用'loadend'事件:

我的地图和loadMask配置:

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()
            }]
        });

似乎这个事件永远不会发生,因为我从来没有得到过警告信息。我真的很想让这个工作,其他尝试是:

window.onload = mask.hide();

在Ext.onReady之后和标签的末尾,但是在地图完成加载之前掩码是隐藏的方式。任何人都可以分享一些见解,我真的很感激!

elshae

1 个答案:

答案 0 :(得分:0)

在像这样的项目之后添加事件'onMapReady':

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