Can't click on map buttons.

[FidoX]

I've discovered an issue when you use the google map into a sencha touch application. The thing is that the zoom buttons,. the map type selectors (map, satellite) and even the close button for the infowindow it's not working with the sencha map component in several versions of android.
I've tested with 2.3.3 (galaxy and emulator), 2.2 (htc desire) and 3.1 (motorola xoom) you can not make zoom in/out because the buttons doesn't respond. If you click on a marker to open a infowindow, then you can not close it. If you click on a link into the infowindow it doesn't respond.

Its too hard to debug because in chrome doesn't occur, only with specific versions of android so I haven't available the javascript developer tools.

The test code simply create a map and put a marker in the middle so you can test that you can open but not close it.



Ext.application({
name: 'Test',

launch: function() {
Ext.create('Ext.Container', {
layout: 'card',
fullscreen: true,
items: [{
xtype: 'map',
layout: 'fit',
listeners: {
maprender: function(map) {
var latlng = new google.maps.LatLng(-34.397, 150.644);
map.setHtml(latlng);
var infowindow = new google.maps.InfoWindow({
content: 'content...'
});
var marker = new google.maps.Marker({
position: latlng,
map: map.map,
title:"Point title"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map.map,marker);
});
}
}
}]
});
}
});


Im using SenchaTouch 2 DP 1. If you use the google map api alone works sucessfully. Anybody have the same issue?

[FidoX]

The provided example
http://docs.sencha.com/touch/2-0/touch/examples/map/index.html
d (http://docs.sencha.com/touch/2-0/touch/examples/map/index.html)oesn't work.

[FidoX]

I think this is related to the same problem with the map:
If I put a html link <a href="...> into a panel using the html property, ocurr the same thing in the android browser. I mean, tap on the link doesn't work on android:



Ext.application({
name: 'Test',

launch: function() {
Ext.create('Ext.Container', {
layout: 'card',
fullscreen: true,
items: [{
xtype: 'container',
layout: 'fit',
html: 'tap: <a href="http://www.google.es">google</a>'
}]
});
}
});

[Jamie Avins]

Thanks FidoX, when you have a reproducible test case like this, feel free to post it on the bug forum so we can get it logged and fixed as soon as possible. I'll move this over for you.

[FidoX]

Hello Jamie,

I will do the next time, Tanks ;)

About the problem: Im trying to found a workarround but I've been unable to found the code that break the "browser native" event handling. I was playing a little with Ext.event.publisher.Dom, for example commenting the methd:


attachListener: function(eventName) {
document.addEventListener(eventName, this.onEvent, !this.doesEventBubble(eventName));


return this;
},

With no results.. I was looking all about click events, but I can't found the point where the events stop working.

Anybody can give me a hint to continue looking for a solution?

Greetings.

[Jamie Avins]

These problems are unrelated as the link issue was recently fixed internally. This most likely has to do with some event prevention we do on the document body. We're looking into it.

[FidoX]

I've solved the problems with the click event on html links (<a>) and the buttons on the google map configuring the viewport as:



preventZooming: false


This solve all issues about ignored click events. And since the zoom is disabled with the meta viewport that configuration doesn't affect other funcionality.

Greetings.

[sc0ttman]

This trick didn't work for me. It goes in the viewport correct?


Ext.define('MyApp.view.Viewport', {
extend: 'Ext.TabPanel',
config: {
preventZooming: false,
.....

It didn't make a difference for me. Any ideas?

[FidoX]

You should apply the preventZooming to the viewport configuration:



Ext.setup({
viewport: {
preventZooming: false
},
onReady: function() {
// Init application...
}
});

[Jamie Avins]

preventZooming will be false by default in the next release.

[boooch]

thanx a lot