Map in Ext.Window.window show not fully

Question

I created extended Ext.Panel.panel component containing maps showing through openlayers, this component is located in Ext.Window.window. But after load page, map showing only partly: http://habrastorage.org/storage2/17f/1be/3bd/17f1be3bdc2a9765c1852d93a95ee1b8.png

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

When i resize browser, map is refresh and show normally. What's fix to make it work?

Answer 1

If nothing works except resize, try to resize programmatically:

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

or use timeout for define map - create map after window is shown: not afterrender, but show

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

or use this code:

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&layer=mapnik'
            }
        }],
        layout: "fit",
        listeners: {
            close: function () {
                this.remove(true);
            }
        },
        modal: true
    }).show();
}

Answer 2

I was confronting myself with the problem and the person with the first solution with the fancy screenshot is wrong. It has absolutely nothing to do with the resize because if you use Google Maps instead of OSM, it works perfectly. The problem ist the missing map attributes, like SRS, BBOX, etc.. Check the documentation for attributes of OpenLayers and it will work.

Answer 3

What if you zoomIn(), and then zoomOut(). Or set the initial zoom to 11, and then call zoomIn() after centering the map.