[GIS] OpenLayers 3 OSM layers in ExtJS 5 looks stretched

Question

I've created OL3 OSM layer in ExtJS 5 (previously did it with OL2).
On my desktop everything looks fine , but on the mobile phone the map looks stretched (This is denver for example).

This is the code I used :

Ext.define('ExtOL.view.Map', {
extend: 'Ext.panel.Panel',
region: 'center',
xtype: 'map',
rtl: true,
html: "<div id='gis_map'></div>", // The map will be drawn inside    
stateful: false,    
border: true,
listeners: {
    afterrender: function () {            

        var extent = ol.proj.transform([34.7193330, 31.8573201, 34.9892725, 32.2086729], 'EPSG:4326', 'EPSG:3857');
        var center = ol.proj.transform([34.8543028, 32.0329965], 'EPSG:4326', 'EPSG:3857');

        layers = [];

        var osm = new ol.layer.Tile({
            source: new ol.source.OSM({})
        });          

        layers.push(osm);

        var view = new ol.View({
            projection: 'EPSG:3857',
            center: center,
            zoom: 15,
            minZoom: 0,
            maxZoom: 16
        });

        map = new ol.Map({
            target: 'gis_map',
            renderer: 'canvas',                
            layers: layers,                
            view: view
        });

        map.getView().fitExtent(extent, map.getSize());




    },
    // The resize handle is necessary to set the map!
    resize: function () {
        var size = [document.getElementById(this.id + "-body").offsetWidth, document.getElementById(this.id + "-body").offsetHeight];
        //console.log(size);            
        map.setSize(size);
    }
},
   initComponent: function () {

        this.callParent(arguments);
    }
});

And this is the App init :

Ext.define('ExtOL.Application', {
extend: 'Ext.app.Application',    
name: 'ExtOL',
views: ['Map', 'Panel','LayerSwitcher'],
controllers: [],
stores: [],    
launch: function () {
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        rtl: true,
        style: 'border:1px solid;padding:2px;background:#157fcc',
        bodyBorder: true,
        defaults: {
            bodyPadding: 0
        },
        items: [
            {
                xtype: 'map'
            }
          ]
        });
    }
});

Any idea why the map is stretching ?

Answer 1

Problem solved by defining both the viewport AND the panel as layout fit.