Листовка osm map и extjs4 проблема рендеринга портала

Question

Я пытаюсь создать простой портлет с картой с помощью extjs 4 и листовки. Проблема в том, что карта полностью не отображается в моем элементе портлета. Он загружает неправильные плитки (256x256), которые находятся вне моего портлета. Эта неправильная плитка находится на левой стороне сверху и справа. Есть ли уловки, чтобы исправить это? Вот на скриншоте, как он выглядит.

Возможно, это поможет выяснить? Я думаю, что это происходит из-за неправильного left и top атрибутов в классе IMG:

<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9904/5121/" style="height: 256px; width: 256px; left: -79px; top: -251px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9905/5123/" style="height: 256px; width: 256px; left: 177px; top: 261px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9904/5122/" style="height: 256px; width: 256px; left: -79px; top: 5px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9903/5121/" style="height: 256px; width: 256px; left: -335px; top: -251px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9902/5121/" style="height: 256px; width: 256px; left: -591px; top: -251px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9902/5120/" style="height: 256px; width: 256px; left: -591px; top: -507px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9901/5120/" style="height: 256px; width: 256px; left: -847px; top: -507px;"> 
<img class="leaflet-tile leaflet-tile-loaded" src="http://myhost/map/14/9901/5119/" style="height: 256px; width: 256px; left: -847px; top: -763px;"> 

Answer 1

Вам нужно вызвать L.Map «s invalidateSize метод после того, как ваша панель полностью оказанные:

проверяет, является ли размер контейнера карты изменен и обновляет карту, если это так - назовите ее после того, как вы изменили размер карты динамически, а также анимацию панорамирования по умолчанию.

http://leafletjs.com/reference.html#map-invalidatesize

Я не специалист по ExtJS, но я взял быстрый взгляд на API, и мне кажется, вы можете сделать это путем прослушивания afterRender события whichs обжигали на Ext.panel.Panel:

Пожары после завершения рендеринга компонентов.

http://docs.sencha.com/extjs/4.0.7/#!/api/Ext.panel.Panel-event-afterrender

EDIT: Нашел этот пример, в котором они инициализировать карту Google в afterRender функции Ext.panel.Panel. Это сделано по той же причине: В этот момент Размер панели может быть определена, который является необходимостью для правильной инициализации экземпляра карты:

http://docs.sencha.com/extjs/4.0.7/#!/example/window/gmap.html

EDIT 2: Так как ОП говорит, ни от выше не является решением я изменил пример Google, чтобы использовать листовку и создал TestCase на Plunker:

http://embed.plnkr.co/Fo9nOYH3KUHRqw4Soq6F/

Answer 2

Метод invalidateSize() решить мою проблему. Я положил его на событие изменения размера карты.