javascript - ExtJS 和 Google map - 从 ExtJS 4.1.1 升级到 4.2.0 后 LoadMask 未居中

Question

我有一个简单的 ExtJS 组件，用于使用谷歌地图显示 map 。从 ExtJS 4.1.1 升级到 4.2.0 后，该组件的负载掩码未正确居中。

请参阅以下 jsFiddle 演示链接。

使用ExtJS 4.1.1:jsFiddle

使用ExtJS 4.2.0:jsFiddle

要了解我在说什么，请添加 map ，然后应用负载蒙版。负载掩模在第一个示例中居中，但在第二个示例中不在适当位置。请注意，如果您在第二个示例中添加 map 之前应用负载掩码，负载掩码将正确显示。

这是一个错误吗？我应该以不同的方式应用负载掩码或者以不同的方式渲染谷歌地图对象吗？谢谢。

我使用的基本代码示例:

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

在 Ext 4.2 中，显然窗口的标记已更改。 在 4.1.1 中，窗口主体如下所示:

<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>

在 4.2 中是这样的:

<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>

您将 map 渲染到body中，因此创建 map 后标记看起来很相似。不同的是，4.2中的居中功能使用了innerCt，而在 map 渲染后，它就消失了。

解决这个问题的一种方法是将组件添加到将渲染 map 的窗口中:

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

工作样本:http://jsfiddle.net/S8Ksy/2/