Map in Ext.Window.window is only partially displayed

Question

JavaScript

I create a component based on Ext.Panel.panel that contains a map displayed through openlayers, I put this component in Ext.Window.window.
The map is only partially displayed after loading:

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.layer.setIsBaseLayer(true);
            this.map.addLayer(this.layer);            
            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 the browser window is resized, it starts to display normally ...

Can anyone tell me from which line my hands grow from the wrong place?

Answer 1

Hands most likely do not grow with you, but with the developers of Ext or OpenLayers, apparently, the card is inserted into the window too early and incorrectly determines its size. Try calling some method to have it recalculate its dimensions.

Answer 2

Try setting dimensions in MA.view.components.OpenlayersPanel

Answer 3

An alternative to resize is the doLayout() method.
But in general this is not normal. I myself am now struggling with a similar problem, when after loading the page the layout is crooked, and it is corrected only after resizing the window or doLayout ().