[GIS] How define new ‘GeoExt.panel.Map’ with OpenLayers-3.6.0 and Extjs-6.0

ext-jsgeoextmodel-view-viewmodelopenlayers

I'm using OpenLayrs-3.6.0 and Extjs-6.0. I want to define GeoMap Panel class like this. In other words, I want to rewrite GeoExt.panel.Map in geoExt-2 library.
for this I define a class as follow:

Ext.define('MyApp2.view.geo.Map', {
    extend: 'Ext.panel.Panel',
    requires: [
    ],
    xtype: 'geoMap',
    layout: 'fit',
    map: null,
    initComponent: function() {
        var me = this;

        var html = '<div id="myId" class="MyId" ></div>';


        mm = me.map;
        me.callParent(arguments);
        Ext.apply(me, {html: html});

        me.map = new ol.Map({
            target: 'myId',
            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
            })
        });
    },
});

The strategy is that create a panel and set its html with: <div id="map" class="map"></div>. I then create a ol.map instance and set its target with: "map"(the "id" of div in html panel).

This solution does not work, How do I do?

or

Someone knows a better solution?

Best Answer

If you want to use OpenLayers 3 with Ext JS 6 you should have a look at https://github.com/KaiVolland/geoext3. It will be merged into https://github.com/geoext/geoext3 in about two weeks.

Even if you don't want to use GeoExt 3 itself, you could use some code of the GeoExt.panel.Map and GeoExt.panel.MapController.

The most interesting part might be the onResize method in the controller:

onResize: function(){
    // Get the corresponding view of the controller (the mapPanel).
    var mapPanel = this.getView();
    if(!mapPanel.mapRendered){
        mapPanel.getMap().setTarget(mapPanel.getTargetEl().dom);
        mapPanel.mapRendered = true;
    } else {
        mapPanel.getMap().updateSize();
    }
}
Related Question