Javascript ExtJS和Google地图-从ExtJS 4.1.1升级到4.2.0后，LoadMask未居中

我有一个简单的ExtJS组件，用于使用google地图显示地图。从ExtJS 4.1.1升级到4.2.0时，此组件的加载掩码未正确居中

有关演示，请参见以下JSFIDLE链接

使用ExtJS 4.1.1：

使用ExtJS 4.2.0：

要了解我在说什么，请添加Map，然后应用Loadmask。Loadmask在第一个示例中居中，但在第二个示例中不在位置。请注意，如果在第二个示例中添加地图之前应用loadmask，则loadmask将正确显示

这是虫子吗？我应该以不同的方式应用loadmask，还是以不同的方式呈现google maps对象？谢谢

我在示例中使用的基本代码：

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

});

---

在Ext4.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>

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

---

工作示例：

在Ext4.2中，Windows的标记已更改。 在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>

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

---

工作示例：

Lolo建议通过在主面板中放置一个子面板并将google maps对象呈现给该子面板来解决此问题。这很有效。另一种解决方法是简单地创建一个隐藏的子面板。我不知道这到底是为什么解决了这个问题，但它确实解决了

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

---

洛洛建议通过在主面板内放置一个子面板并将google maps对象呈现给该子面板来解决此问题。这很有效。另一种解决方法是简单地创建一个隐藏的子面板。我不知道这到底是为什么解决了这个问题，但它确实解决了

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

---

谢谢！你认为这是虫子吗？不，我不认为。

Ext.layout.container.Auto

layout中有一些更改，该布局导致标记差异。在4.1.1中，容器下只有

clearEl

，仅用于应用

clear:both

样式。另一方面，在4.2中有

outerCt

和

innerCt

，这是有原因的。将贴图直接渲染到

主体中

会替换其内容，因此可能会导致一些问题。谢谢！你认为这是虫子吗？不，我不认为。

Ext.layout.container.Auto

layout中有一些更改，该布局导致标记差异。在4.1.1中，容器下只有

clearEl

，仅用于应用

clear:both

样式。另一方面，在4.2中有

outerCt

和

innerCt

，这是有原因的。将贴图直接渲染到

主体中

会替换其内容，因此可能会导致一些问题。