View Full Version : Sencha Touch 2 and OpenLayer

Manolo Quijano
9 Dec 2012, 3:15 PM
Hi all!

I'm trying to migrate the example of Openlayer + Sencha Touch 1.1 ( http://openlayers.org/dev/examples/mobile-sencha.html) to Sencha Touch 2.1.

After a few fights I get to make run Openlayer + Sencha touch 2.1 but the map does not take the whole screen width.

That's my code:

Ext.define('Prueba.view.Main', {
extend: 'Ext.Container',

requires: [

config: {
fullscreen: true,

items: [{

xtype: 'toolbar',
docked: "bottom",
layout: {
pack: "center"

items: [{
iconCls: "home",
iconMask: true,
handler: function(){

xtype: "component",
scroll: false,
monitorResize: true,
id: "map",
listeners: {
painted: function(){

resize: function(){


And the function init

function init() { // create map
map = new OpenLayers.Map({
div: "map",
theme: null,
numZoomLevels: 24,
units: 'm',
allOverlays: true,
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
controls: [
new OpenLayers.Control.Attribution(),
new OpenLayers.Control.TouchNavigation({
dragPanOptions: {
enableKinetic: true


var mapbing= new OpenLayers.Layer.Bing({
isBaseLayer: true,
key: apiKey,
type: "Aerial",
name: "Bing Aerial",
transitionEffect: 'resize'


Does someone know why the map is not fit on the screen?

Thanks in advance,
Manolo Q.

11 Dec 2012, 6:33 AM
I've never used OpenLayers but how does map.updateSize(); work? Is it always going to take up 100% width and height?

Manolo Quijano
11 Dec 2012, 6:50 AM
mmmm, I need to check it.

In the sample of Sencha Touch 1.1 resize is never fired, only works with render event and works fine.
(check it using Chrome in my PC).

Now render is deprecated and it used painted event ( I'm not sure whether this change is completely equivalent or not).

Theoretically the map.updateSize() should to be fit to the <div> with id="map".
I need to check if extra parameter must to be set for working properly in Sencha Touch 2.1

Manolo Quijano
11 Dec 2012, 11:06 PM

I can confirm that the updateSize(); uses ClientWidth and ClientHeight to take the new size of the map. That's all the div size.

After debuging the example uses Sencha Touch 1.1 and Sencha Touch 2.1, I can see in a first view that in Sencha Touch 2.1 the div wih id:"map" has a child node with class: "x-paint-monitor overflowchange".

Is there a way to avoid to create this child?

I'm making a new component "MapOpenlayer.js" base on "Map.js" and the method getElementConfig is this:

getElementConfig: function() { return { reference: 'element', className: 'x-container', children: [] }; },


Manolo Quijano
18 Dec 2012, 4:58 AM
I was missing to expand the map to the size of div.

Thread closed, thanks

15 Jan 2013, 2:44 AM
Hi Manolo,

Could you upload an archive with the complete code of the OL example using ST2.1?
It would be very helpfull for many people.
I am searching for this from two months and there are almost no references online.

I am working on a mobile version for this site: http://www.trafficguide.ro/.

Thank you!