Sencha XTemplate und a internal function, return "undefined"

[mr.easht]

Hello FOlks, im quite new into Sencha Touch, but familiar with HTML, Javascript/jQuery, OOP, PHP, Perl, etc. So im not new in the programming bussiness. But this problems freaks me out...

Sencha XTemplate und a internal function, return "undefined", but an alert() returns/alerts the correct value.

With the following code, everxything works fine, until i want to use the callback of the getImage function, it always returns "undefined". But when i alert - directly in front ot the "return" in the function, its the correct value, so it is an image from facebook.


getPhotoAlbumsTemplate: function() {
return new Ext.XTemplate([
'<tpl for=".">',
'<div>',
'<p>{name}</p>',
'<small>von {from.name}</small>',
'<div>',
'<div>{[this.getImage(values.cover_photo)]}</div>',
'<div><a href="#">see all images</a></div>',
'</div>',
'</div>',
'</tpl>'
].join(''),
{
getImage: function(picture_id){
Ext.data.JsonP.request({
url: 'https://graph.facebook.com/' + picture_id + '?access_token=ABCD',
callbackKey: 'callback',
success: function(result) {
var outputData = result;
if (outputData) {
// --> alert(outputData.source) here gives me the correct value, an image
// but the return function returns undefined...
return new Ext.XTemplate([
'<tpl for=".">',
'<img src="{source}" />',
'</tpl>'
].join('')).apply(outputData);
} else {
return 'no-image.png';
}
}
});
}
});
},

Has anybody an idea how to solve this "mystery". Thansk in advance!

[mitchellsimoens]

You're code isn't async, it's sync but you are doing a request that is going to be async. Just because you didn't return anything in getImage the function will cease to execute and will therefor return undefined.

Also in your request you are using return within the success callback which will only return that function not the getImage function which I'm sure you thought will happen.