ChristopherRyan
30 Nov 2010, 5:43 AM
I'm attempting to display a segment of a JSON object in a list, but am having some trouble getting the information to display in separate sections of the list. My json object is as follows (some information removed for clarity):
{
...
"checkins":[
{
"venue":null,
"user":{
"firstname":"Frank",
"phone":null,
"twitter":null,
"badges":null,
"checkin":null,
"settings":null,
"lastname":null,
"photo":"http://foursquare.com/img/blank_boy.png",
"gender":"male",
"email":null,
"facebook":null,
"friendstatus":"self",
"id":"43369",
"status":null
},
"distance":null,
"primarycategory":null,
"created":"Wed, 24 Nov 10 14:53:25 +0000",
"shout":null,
"timezone":"America/New_York",
"id":"2817971",
"display":null
},
{
"venue":null,
"user":{
"firstname":"Chris",
"phone":null,
"twitter":null,
"badges":null,
"checkin":null,
"settings":null,
"lastname":"R.",
"photo":"http://foursquare.com/img/blank_boy.png",
"gender":"male",
"email":null,
"facebook":null,
"friendstatus":null,
"id":"39870",
"status":null
},
"distance":null,
"primarycategory":null,
"created":"Wed, 24 Nov 10 14:57:38 +0000",
"shout":null,
"timezone":"America/New_York",
"id":"2818025",
"display":null
}
],
...
I would like each "checkins" object to be displayed as a separate list item. Currently my tpl looks like:
lbs.details.fsqPeopleHereTpl = new Ext.XTemplate
(
'<tpl for="fourSquare.checkins">',
'<div class="peopleHereFullList">',
'<img src="{user.photo}"/> {user.firstname} {user.lastname}',
'</div>',
'</tpl>',
{
compile: true
}
);
While my list is defined as:
lbs.details.venue.peopleHereFullList = new Ext.List({
id: 'peopleHereFullList',
store: lbs.venueStore,
height: window.innerHeight,
autoHeight: true,
itemTpl: lbs.details.fsqPeopleHereTpl,
itemSelector:'div.peopleHereFullList'
});
With this code the information is being displayed in a single list item instead of breaking up the div.peopleHereFullList elements into separate list items. Any help in resolving this issue would be appreciated. I've looked over the list and xtemplate documentation and can't quite find what it is that I'm doing differently.
{
...
"checkins":[
{
"venue":null,
"user":{
"firstname":"Frank",
"phone":null,
"twitter":null,
"badges":null,
"checkin":null,
"settings":null,
"lastname":null,
"photo":"http://foursquare.com/img/blank_boy.png",
"gender":"male",
"email":null,
"facebook":null,
"friendstatus":"self",
"id":"43369",
"status":null
},
"distance":null,
"primarycategory":null,
"created":"Wed, 24 Nov 10 14:53:25 +0000",
"shout":null,
"timezone":"America/New_York",
"id":"2817971",
"display":null
},
{
"venue":null,
"user":{
"firstname":"Chris",
"phone":null,
"twitter":null,
"badges":null,
"checkin":null,
"settings":null,
"lastname":"R.",
"photo":"http://foursquare.com/img/blank_boy.png",
"gender":"male",
"email":null,
"facebook":null,
"friendstatus":null,
"id":"39870",
"status":null
},
"distance":null,
"primarycategory":null,
"created":"Wed, 24 Nov 10 14:57:38 +0000",
"shout":null,
"timezone":"America/New_York",
"id":"2818025",
"display":null
}
],
...
I would like each "checkins" object to be displayed as a separate list item. Currently my tpl looks like:
lbs.details.fsqPeopleHereTpl = new Ext.XTemplate
(
'<tpl for="fourSquare.checkins">',
'<div class="peopleHereFullList">',
'<img src="{user.photo}"/> {user.firstname} {user.lastname}',
'</div>',
'</tpl>',
{
compile: true
}
);
While my list is defined as:
lbs.details.venue.peopleHereFullList = new Ext.List({
id: 'peopleHereFullList',
store: lbs.venueStore,
height: window.innerHeight,
autoHeight: true,
itemTpl: lbs.details.fsqPeopleHereTpl,
itemSelector:'div.peopleHereFullList'
});
With this code the information is being displayed in a single list item instead of breaking up the div.peopleHereFullList elements into separate list items. Any help in resolving this issue would be appreciated. I've looked over the list and xtemplate documentation and can't quite find what it is that I'm doing differently.