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

Question

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

});

Answer 1

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/