PDA

View Full Version : Keeping reference to "this" in callback



won.rhee
18 Nov 2011, 5:15 PM
Hello again!
I've been trying to find a way to keep my "this" reference when callback function is called from navigator.geolocation.getCurrentPosition.

In Controller :


.............
showmap: function(options){
if(!this.mapPanel){
this.mapPanel = this.render({
xtype: 'LocationsMapView'
});
}
this.application.viewport.setActiveItem(this.mapPanel, options.animation);


var initialLocation;
var myOptions = {
zoom: 10,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapPanelId"), myOptions);
navigator.geolocation.getCurrentPosition(function(pos){
initialLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
map.setCenter(initialLocation);
console.log(this); //is there a way to keep "this"
}, function(){
console.log('failed');
});
},
..............


This is my view:


MyApp.views.LocationsMapView = Ext.extend(Ext.Panel,{
layout: 'fit',
dockedItems: [.....],
items: [
{
xtype: 'panel',
id: 'mapPanelId'
}
]
});
Ext.reg('LocationsMapView', MyApp.views.LocationsMapView);


Also, I've also been tinkering around with Ext.util.GeoLocation and Ext.Map but just cant seem to figure out how to replicate navigator.geolocation.watchPosition function using Ext classes. (This would be my 2nd question, if you have any good materials, it would be great)

Back to the primary issue... i've been searching around and seems like closure or callback function returns anonymous function. But I am just not sure. Hopefully I can get my head around this soon...

won.rhee
18 Nov 2011, 5:26 PM
I know I can set "this" to "self" but is this really the way??



.............
showmap: function(options){
if(!this.mapPanel){
this.mapPanel = this.render({
xtype: 'LocationsMapView'
});
}
this.application.viewport.setActiveItem(this.mapPanel, options.animation);
var self = this; //DO I REALLY HAVE TO DO THIS ALL THE TIME??

var initialLocation;
var myOptions = {
zoom: 10,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapPanelId"), myOptions);
navigator.geolocation.getCurrentPosition(function(pos){
initialLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
map.setCenter(initialLocation);
console.log(self); //this works
}, function(){
console.log('failed');
});
},
..............

mitchellsimoens
18 Nov 2011, 5:28 PM
Two ways...

At the beginning of showmap function, cache this onto a variable like this:


showmap: function() {
var me = this;
....
}

And then instead of referring to 'this' in the getCurrentPosition callback refer to me.

Other way is to do this:


navigator.geolocation.getCurrentPosition(Ext.util.Functions.createDelegate(function(pos){
initialLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
map.setCenter(initialLocation);
console.log(this); //is there a way to keep "this"
}, this), function(){
console.log('failed');
});

And now the scope of that function is 'this' from showmap

won.rhee
29 Nov 2011, 5:05 PM
navigator.geolocation.getCurrentPosition(Ext.util.Functions.createDelegate(function(pos){
initialLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
map.setCenter(initialLocation);
console.log(this); //is there a way to keep "this"
}, this), function(){
console.log('failed');
});

And now the scope of that function is 'this' from showmap[/QUOTE]

I'm enjoying Ext.util.Functions.createDelegate() Thank you! =D>