在Ext.Window.window中显示地图不完全

我创建了包含通过Openlayers显示的地图的扩展Ext.Panel.panel组件，该组件位于Ext.Window.window中。但经过负载页面，地图只显示部分： http://habrastorage.org/storage2/17f/1be/3bd/17f1be3bdc2a9765c1852d93a95ee1b8.png 在Ext.Window.window中显示地图不完全

Ext.define('MA.view.components.OpenlayersPanel', 
{ 
    extend: 'Ext.panel.Panel', 
    alias: 'widget.openlayerspanel', 
    multiSelect: true, 

    initComponent: function() 
    { 
     this.callParent(arguments); 
     this.on('afterrender', this.afterRender, this); 
    }, 

    afterRender: function() 
    { 
     this.map = new OpenLayers.Map(this.body.dom.id); 
     this.layer = new OpenLayers.Layer.OSM('OSM Map'); 
     this.fromProjection = new OpenLayers.Projection("EPSG:4326"); 
     this.toProjection = new OpenLayers.Projection("EPSG:900913"); 
     this.position = new OpenLayers.LonLat(75.1, 61.15).transform(this.fromProjection, this.toProjection); 
     this.zoom = 12; 
     this.map.addLayer(this.layer); 
     this.layer.setIsBaseLayer(true);   
     this.map.setCenter(this.position, this.zoom); 
    } 
});

app.js：

Ext.application(
{ 
    requires: ['Ext.container.Viewport'], 
    name: 'MA', 
    appFolder: 'app', 
    controllers: 
     [ 
      'Map' 
     ], 
    launch: function() 
    { 
     Ext.create('Ext.window.Window', 
      { 
       layout: 
       { 
        type: 'vbox' 
       }, 
       items: 
        [ 
         { 
          xtype: 'openlayerspanel' 
         }, 
         { 
          xtype: 'button', 
          text: 'Load', 
         } 
        ] 
      }).show(); 
    } 
});

当我调整浏览器，地图刷新和正常显示。什么修复使其工作？

来源

2013-03-10 Alexandr T

如果没有工作，除了调整大小，试图以编程方式调整：

//inside window listeners 
show: function(){ 
    this.setWidth(this.getWidth() + 1); // or height 
}

或使用超时定义地图 - 创建地图显示窗口后： 不AfterRender阶段，但显示

show: function(){ 
    setTimeout(function(){ 
    // init map here 
    }, 100) 
}

或使用此代码：

function ShowMapWindow() { 
    Ext.create('Ext.window.Window', { 
     width: 400, 
     height: 300, 
     items: [{ 
      loader: { 
       loadMask: { showMask: true }, 
       renderer: 'frame', 
       url: 'http://www.openstreetmap.org/export/embed.html?bbox=37.314,55.568,38.031,55.927&amp;layer=mapnik' 
      } 
     }], 
     layout: "fit", 
     listeners: { 
      close: function() { 
       this.remove(true); 
      } 
     }, 
     modal: true 
    }).show(); 
}

enter image description here