1

Googleマップを使用してマップを表示するために使用している単純なExtJSコンポーネントがあります。ExtJS 4.1.1 から 4.2.0 にアップグレードすると、このコンポーネントのロードマスクが正しく中央に配置されません。

デモについては、次の jsFiddle リンクを参照してください。

ExtJS 4.1.1 の使用: jsFiddle

ExtJS 4.2.0 の使用: jsFiddle

私が話していることを確認するには、マップを追加してからロードマスクを適用します。最初の例ではロードマスクが中央に配置されていますが、2 番目の例では位置がずれています。2 番目の例でマップを追加する前にロードマスクを適用すると、ロードマスクが正しく表示されることに注意してください。

これはバグですか？ロードマスクを別の方法で適用するか、Google マップ オブジェクトを別の方法でレンダリングする必要がありますか? ありがとう。

例に使用している基本的なコード:

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

0

Lolo は、メイン パネル内に子パネルを配置し、それに Google マップ オブジェクトをレンダリングすることで、これを解決することを提案しました。それはうまくいきます。ただし、それを解決する別の方法は、単純に非表示の子パネルを作成することです。なぜそれが問題を解決するのか正確にはわかりませんが、そうです。

 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 に答える