How can I fit "ol.Map" to "Ext.panel.Panel"?

Question

I'm developing a web gis with Extjs 6.0 and OpenLayers 3.6.0 in MVVM Architecture. I want to put ol.map to a Ext.panel.Panel. Main view of the Project is as bellow:

Ext.define('MyApp2.view.main.Main', {
    extend: 'Ext.container.Container',
    requires: [
        'MyApp2.view.main.MainController',
        'MyApp2.view.main.MainModel'
    ],
    xtype: 'app-main',
    controller: 'main',
    viewModel: {
        type: 'main'
    },
    layout: {
        type: 'border'
    },
    items: [{
            xtype: 'panel',
            bind: {
                title: '{name}'
            },
            region: 'west',
            html: 'its me! - West Panel',
            width: 125,
            minWidth: 100,
            maxWidth: 250,

        }, {
            xtype: 'panel',
            region: 'center',
            collapsible: false,
            html: '<div id="map" class="map"></div>',
            listeners: {
                beforerender: 'beforerender',
                afterrender: 'afterrender'
            }
        }]
});

first I render the panel with html config: <div id="map" class="map"></div> and then in afterrender listener initialize ol.map as follow:

Ext.define('MyApp2.view.main.MainController', {
    extend: 'Ext.app.ViewController',
    requires: [
        'Ext.window.MessageBox'
    ],
    alias: 'controller.main',
    afterrender: function() {
        map = new ol.Map({
            target: 'map',
            layers: [
                new ol.layer.Tile({
                    title: "Global Imagery",
                    source: new ol.source.TileWMS({
                        url: 'http://localhost:8080/geoserver/world/wms?service=WMS',
                        params: {LAYERS: 'world:worldRaster', VERSION: '1.1.1'}
                    })
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [35, 41],
                zoom: 4
            })
        });
    },
    beforerender: function(){
        console.log("Salam Bar Mahdi");
    }
});

The code does not give any error, but when I run it, Everything is good except when I want to zoom in map, it zoom another place. see following picture: This bug remains stable until in index.html file I define follow css:

<style>
.map {
    height: 600px;
    width: 600px;
}
</style>

This css put ol.map to a 600x600 box, But I want ol.map fit to Ext.panel.Panel.

How do I do?

Answer 1

The ol.map class must sit in a certain height and width component. The only thing that is required is that initial ol.map with afterlayout event.

Answer 2

You could use the boxready event of Ext.Container on version 4.2, as suggested in this answer on GIS Stack Exchange, where the following code is proposed:

th.items = [
    Ext.create('Ext.Component', {
        initComponent: function () {
            var me = this;
            th.mapContainerId = me.id;
            me.on("boxready", function () {
                th.initMap();
            });
            me.on("resize", function () {
                if (th.mapInst) {
                    th.mapInst.updateSize();
                }
            });
            me.callParent(arguments);
        }
    })
];