PDA

View Full Version : "passing google maps gevents to extjs" or "simulate mouse click"



thomas.oberthanner
9 Feb 2011, 11:59 AM
hi,

i tried my very best to solve this problem but i am stuck:

inside an Extjs Panel i add a div for google maps, which works perfect but seems to be very greedy concerning events. when i click on the map, extjs does not get informed about that: e.g. any open menus remain open. what is the correct way to "forward" such an event to extjs?

i tried different ways without any success (e.g. panel has no click event which i could fire / Ext.getCmp(panel).el.click() is not a function).

what would be the right approach? i still think that gevent.addlistener() (see code below) is the right starting point, but how should i continue? i figured out a possible (and dirty) workaround, simulating a "escape" key press event should do the job but i consider this as cheating.

it is evening number four i spent over this and so i decided to ask here. thank you in advance

tom


Tom.GMap = Ext.extend(Ext.Panel, {
// ...
afterRender : function() {
Tom.GMap.superclass.afterRender.apply(this, arguments);

this.gMapEl = Ext.DomHelper.append(this.body,
'<div style="width: 100%; height: 100%"></div>', true);
this.gMap = new google.maps.Map2(this.gMapEl.dom, this.gMapOptions);

// Listener für RMB
GEvent.addListener(this.gMap, 'singlerightclick', function(point, src,
overlay) {
// ...
cmenu = new Ext.menu.Menu({
items : [{
text : 'test'
}]
});
var pos = Ext.getCmp(myId).getPosition();
cmenu.showAt(new Array(pos[0] + point.x, pos[1] + point.y));
});

// TELL EXTJS THAT THE PANEL HAS BEEN CLICKED
GEvent.addListener(this.gMap, 'click', function() {
// I GET CALLED AS EXPECTED, BUT WHAT`S NEXT ?
});

},
// ...
});

thomas.oberthanner
11 Feb 2011, 12:36 PM
sometimes it is bad, when your thread gets no answers and sometimes it is good. if you find a solution for yourself, you feel pretty good. :D


// Listener for LMB
GEvent.addListener(this.gMap, 'click', function() {
Ext.menu.MenuMgr.hideAll();
});

mr.zaur
11 Aug 2011, 6:06 AM
I tried what its done above but I think I do have some mistake in this.myOptions declaration, here's a code:



var Gmap= new Ext.Panel({
height:500,
id:'gmap',

afterRender:function(){

//this.latlng = new google.maps.LatLng(-34.397, 150.644);
this.myOptions = {
zoom: 5,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};

this.gMapEl=Ext.DomHelper.append(this.body,
'<div style="width: 100%; height: 100%"></div>',true);
this.gMap=new google.maps.Map(this.gMapEl.dom,this.myOptions);


}
});