How define new 'GeoExt.panel.Map' with OpenLayers-3.6.0 and Extjs-6.0?

How define new 'GeoExt.panel.Map' with OpenLayers-3.6.0 and Extjs-6.0?

I'm usingOpenLayrs-3.6.0andExtjs-6.0. I want to define GeoMap Panel class like this. In other words, I want to rewriteGeoExt.panel.MapingeoExt-2library. 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 = ''; mm =; me.callParent(arguments); Ext.apply(me, {html: html}); = 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:. I then create aol.mapinstance and set its target with: "map"(the "id" of div in html panel).

This solution does not work, How do I do?


Someone knows a better solution?

If you want to use OpenLayers 3 with Ext JS 6 you should have a look at It will be merged into in about two weeks.

Even if you don't want to use GeoExt 3 itself, you could use some code of theGeoExt.panel.MapandGeoExt.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(); } }

in Ext 4.2 I am using Container inside of Panel: added in initComponent:

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

this Panel, andmeis Container. It prefered to initialize the map instanseoncewhen Container isreadyandupdate map sizewhen Outer Container'ssize changed