1

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

有关演示，请参阅以下 jsFiddle 链接。

使用 ExtJS 4.1.1：jsFiddle

使用 ExtJS 4.2.0：jsFiddle

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

这是一个错误吗？我应该以不同的方式应用加载掩码还是以不同的方式呈现谷歌地图对象？谢谢。

我用于示例的基本代码：

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

});
4

2 回答 2

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>

您将地图渲染为body，因此在创建地图后，标记看起来很相似。不同之处在于，在 4.2 中，居中功能使用innerCt，在地图渲染后丢失。

解决此问题的一种方法是将组件添加到将呈现地图的窗口中：

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/

于 2013-10-28T12:39:41.810 回答
0

Lolo 建议通过在主面板内放置一个子面板并将谷歌地图对象渲染到该面板来解决这个问题。这样可行。解决它的另一种方法是简单地创建一个隐藏的子面板。不知道为什么这能解决问题，但确实如此。

 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

于 2014-10-09T20:17:43.633 回答