PDA

View Full Version : Using JSONP, inside getDetailCard function of a NestedList.



robertvrabel
14 Jun 2011, 10:28 AM
I've created a nested list that is two levels deep, categories -> locations. Tapping a location it brings up a detail card of information... when this happens i want it to do a request to get all the information for that location, then update the detail card with it.

Problem: Its doing the ajax request, then immediately running the rest of the code and returning a blank detail card (itemData isn't populated yet) instead of waiting until the JSONP request is done. I've tried to move the logic into the callback of that request, but i couldn't get it to work right as it would just return the blank detail card since it wasn't waiting for the request to be done.

Can someone steer me in the right direction of how to do this?



Ext.onReady(function() {
CampusMap.views.Categories = Ext.extend(Ext.NestedList, {
iconCls: 'action',
fullscreen: true,
useTitleAsBackText: false,
title: 'Categories',
displayField: 'text',
store: CampusMap.storecategories,
/*
onItemTap: function(item) {
console.log(item);
},
*/
getDetailCard: function(item, parent) {
var itemData = item.attributes.record.data;
var parentData = parent.attributes.record.data;

// Do a request to get all the information about this location
Ext.util.JSONP.request({
url: 'inc/getlocation.php',
callbackKey: "callback",
params: {
location_id: itemData.location_id,
callback: 'true'
},
callback: function(data) {
// Transfer the necessary stuff over to itemData
itemData = data;

console.log('here');
console.log(itemData);
}
});


// Show the panel
detailCard = new Ext.Panel({
id: 'showcard',
scroll: 'vertical',
styleHtmlContent: true,
tpl: locationtpl,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'View on Map',
ui: 'action-round',
handler: function(button, event) {
// Create the Marker
CreateMarker(itemData);
}
}]
}],
listeners: {
activate: function(){
// Set the title of the detail card
CampusMap.views.categories.toolbar.setTitle('');
}
}
});

console.log(itemData);

// Update the panel with the new data
detailCard.update(itemData);

//this.backButton.setText(parentData.text);
return detailCard;
},
getItemTextTpl: function() {
var tplConstructor = '{text}' +
'<tpl if="model === \'category\'">'+
'<div class="metadata">' +
' {count} items' +
'</div>' +
'</tpl>';

return tplConstructor;
}
});

Ext.reg('categories', CampusMap.views.Categories);
});

robertvrabel
15 Jun 2011, 4:55 AM
Anyone have any ideas on the proper way to do something like this?