CODEWITHSUNDEEP
javascriptgoogle-maps-api-3extjs4extjs4.1extjs4.2
zeke
zeke

Reputation: 3663

ExtJS and Google Maps - LoadMask not centered after upgrading from ExtJS 4.1.1 to 4.2.0

I have a simple ExtJS component that I am using to display a map using google maps. Upon upgrading from ExtJS 4.1.1 to 4.2.0 my loadmasks for this component are not centered correctly.

See the following jsFiddle links for demo.

Using ExtJS 4.1.1: jsFiddle

Using ExtJS 4.2.0: jsFiddle

To see what I'm talking about, Add Map, then Apply Loadmask. Loadmask is centered in the first example, yet out of position in the second. Note that if you apply loadmask before adding map in the second example the loadmask displays correctly.

Is this a bug? Should I be applying the loadmask differently or perhaps rendering the google maps object differently? Thanks.

Basic code I'm using for examples:

Ext.onReady(function () {

    Ext.create('Ext.window.Window',{
        height:300,
        width:300,
        title:'Using ExtJS 4.x.x',
        id: 'gmap-win'
    }).show();

    Ext.create('Ext.button.Button',{
        text:'Add Map',
        renderTo:'btn',
        handler: function(){
            var myLatLng = new google.maps.LatLng(0, 0);
            var myOptions = {
                zoom: 2,
                center: myLatLng,
                mapTypeId: google.maps.MapTypeId.TERRAIN
            };
            new google.maps.Map(Ext.getCmp('gmap-win').body.dom, myOptions);
        }
    });

    Ext.create('Ext.button.Button',{
        text:'Apply loadmask',
        renderTo:'btn1',
        handler: function(){
            Ext.getCmp('gmap-win').setLoading(true);
        }
    });

    Ext.create('Ext.button.Button',{
        text:'Remove loadmask',
        renderTo:'btn2',
        handler: function(){
            Ext.getCmp('gmap-win').setLoading(false);
        }
    });

});

Upvotes: 1

Views: 891

Answers (2)

zeke
zeke

Reputation: 3663

Lolo suggested solving this by placing a child panel inside the main panel and rendering the google maps object to that. That works. Another way to solve it though is to simply create a hidden child panel. Not sure why exactly that fixes the problem, but it does.

 Ext.create('Ext.window.Window',{
        height:300,
        width:300,
        title:'Using ExtJS 4.2.0',
        id: 'gmap-win',
        layout:'fit',     /// ADDED
        items:[{hidden:true}]  /// ADDED
    }).show();

jsfiddle

Upvotes: 0

Krzysztof
Krzysztof

Reputation: 16140

In Ext 4.2 apparently markup was changed for window. In 4.1.1 body of window looks like this:

<div id="gmap-win-body" class="x-window-body x-window-body-default x-closable x-window-body-closable x-window-body-default-closable x-window-body-default x-window-body-default-closable" style="width: 290px; height: 270px; left: 0px; top: 20px;">
    <div id="gmap-win-clearEl" class="x-clear" role="presentation"></div>
</div>

while in 4.2 like this:

<div id="gmap-win-body" class="x-window-body x-window-body-default x-closable x-window-body-closable x-window-body-default-closable x-window-body-default x-window-body-default-closable x-resizable x-window-body-resizable x-window-body-default-resizable" style="width: 290px; height: 270px; left: 0px; top: 20px;">
    <span id="gmap-win-outerCt" style="display: table; width: 100%; table-layout: fixed; height: 100%;">
        <div id="gmap-win-innerCt" style="display:table-cell;height:100%;vertical-align:top;" class=""></div>
    </span>
</div>

You render map into body, so after map is created markup looks similiar. The difference is that, in 4.2 centering function uses innerCt, which is missing after map is rendered.

One way to fix that is to add component into window in which map will be rendered:

Ext.create('Ext.window.Window',{
    height:300,
    width:300,
    title:'Using ExtJS 4.2.0',
    id: 'gmap-win',
    layout: 'fit',
    items: [
        { xtype: 'box', itemId: 'map' }
    ]
}).show();

[...]

new google.maps.Map(Ext.getCmp('gmap-win').getComponent('map').el.dom, myOptions);

working sample: http://jsfiddle.net/S8Ksy/2/

Upvotes: 1

Related Questions