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

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) {
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
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;


// 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
listeners: {
activate: function(){
// Set the title of the detail card


// Update the panel with the new data

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

return tplConstructor;

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

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