Как добавить карту OpenLayers в панель ExtJs?

Question

Когда я пытаюсь добавить OpenLayers на карту ExtJS, я вижу странное поведение. Масштаб карты становится слишком большим и низкого качества. В консоли браузера я вижу, что загружаются только два изображения png, тогда как, когда я не использую ExtJS и просто отображаю карту в div-компонент, загружается десяток изображений. Таким образом, это так, как я это сделать это прямо сейчас:

{ 
     region:'center', 
     layout:'fit', 
     title:'Map', 
     xtype:'panel', 
     html:'<div id="map"></div>', 
     listeners:{ 
       render:function(){           
        var osmLayer = new ol.layer.Tile({ 
         source: new ol.source.OSM() 
        }); 
        var moscow = ol.proj.transform([44.49,56.18], 'EPSG:4326', 'EPSG:3857'); 
        var view = new ol.View({ 
         center: moscow, 
         zoom: 1 
        }); 
        var map = new ol.Map({ 
         target: 'map' 
        }); 
        map.addLayer(osmLayer); 
        map.setView(view); 
       } 
      } 
     } 

Answer 1

Я думаю, я нашел еще лучший способ реализации этой задачи (лучше, чем в this примере). Итак, вот как я это делаю сейчас:

{ 
    region:'center', 
    layout:'fit', 
    title:'Map', 
    xtype:'panel', 
    listeners:{ 
     afterrender:function(){ 

      var me = this, 

      osmLayer = new ol.layer.Tile({ 
       source: new ol.source.OSM() 
      }), 

      city = ol.proj.transform([44.49, 56.18], 'EPSG:4326', 'EPSG:3857'), 

      view = new ol.View({ 
       center: city, 
       zoom: 6 
      }); 

      this.map = new ol.Map({ 
       target: me.body.dom.id, 
       renderer: 'canvas', 
       layers: [osmLayer], 
       view: view 
      }); 

     }, 
     resize: function() { 
      this.map.updateSize(); 
     } 
    } 
}