PDA

View Full Version : issue getting carousel to display properly



OliverD
13 Jul 2010, 8:20 AM
I'm a complete Ext noob and am trying to build a relatively simple portfolio site that displays photos via the Flickr API. I've created a pre-configured class that accepts a Flickr photoset ID and retrieves those photos and places them in a carousel. However, it isn't quite working yet.

Here's my index.js file:


Ext.ns('portfolio', 'portfolio.ui', 'portfolio.data');

Ext.setup({
tabletStartupScreen: 'img/tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,

onReady: function() {
var viewport = new portfolio.ui.FlickrCarousel({
photosetid: "72157604833304681",
fullscreen: true,
ui: 'portfolio',
id: 'viewport'
});
}
});

And then my FlickrCarousel.js file:


portfolio.ui.FlickrCarousel = Ext.extend(Ext.Carousel, {
items: [],
initComponent: function() {

Ext.util.JSONP.request({
url: 'http://api.flickr.com/services/rest/',
callbackKey: 'jsoncallback',
params: {
method: 'flickr.photosets.getPhotos',
api_key: 'censored',
photoset_id: this.photosetid,
format: 'json'
},
scope: this,
callback: function(data) {

for (var i = 0; i < 5; i++) {
this.items[i] = {
title: data.photoset.photo[i].title,
html: '<img src="http://farm' + data.photoset.photo[i].farm +
'.static.flickr.com/' + data.photoset.photo[i].server +
'/' + data.photoset.photo[i].id +
'_' + data.photoset.photo[i].secret +
'.jpg" alt="' + data.photoset.photo[i].title +
'" />'
}
}

portfolio.ui.FlickrCarousel.superclass.initComponent.call(this);
}
});
}
});

Ext.reg('portfolio-flickrcarousel', portfolio.ui.FlickrCarousel);

Finally, the JSON data returned by Flickr:


Ext.util.JSONP.callback({"photoset":{"id":"72157604833304681", "primary":"2476005612", "owner":"26163786@N03", "ownername":"orangesprocket", "photo":[{"id":"2476005612", "secret":"bb5b949a89", "server":"2059", "farm":3, "title":"This is Seansie Mc Luvin.. writer extraordinaire", "isprimary":"0"}, {"id":"2475382917", "secret":"07c6e9f366", "server":"3288", "farm":4, "title":"OrangeSprocket Central", "isprimary":"0"}, {"id":"2476303539", "secret":"3bf322c8c1", "server":"2210", "farm":3, "title":"Inside the Big Orange Machine", "isprimary":"0"}, {"id":"2495466472", "secret":"1f1ae1b1b5", "server":"2381", "farm":3, "title":"Becky", "isprimary":"0"}, {"id":"2564912428", "secret":"80b2f01fef", "server":"3044", "farm":4, "title":"OrangeSprocket | Bill McGrath and Jeff Curry. We love this camera!", "isprimary":"0"}, {"id":"2564912588", "secret":"bcdba4a99d", "server":"3257", "farm":4, "title":"OrangeSprocket | Creative Director Jeff Curry, Cameraman to the stars!", "isprimary":"0"}, {"id":"2564912774", "secret":"276cd8773f", "server":"3061", "farm":4, "title":"OrangeSprocket | Creative Director Jeff Curry Service New Brunswick Video Proposal Shoot", "isprimary":"0"}, {"id":"2564086167", "secret":"107033509f", "server":"3278", "farm":4, "title":"OrangeSprocket | Becky Tibble Senior Designer. No she doesn't Smoke. That was for a video shoot.", "isprimary":"0"}, {"id":"2564086353", "secret":"0cb6b882a4", "server":"3176", "farm":4, "title":"OrangeSprocket | Becky Tibble Senior Designer. Hmm. What's that behind her?", "isprimary":"0"}, {"id":"2564086577", "secret":"67bc299969", "server":"3050", "farm":4, "title":"OrangeSprocket | Becky Tibble Senior Designer. Hard at work", "isprimary":"0"}, {"id":"2564086857", "secret":"1ca8b2c5a2", "server":"3096", "farm":4, "title":"OrangeSprocket | Bill McGrath. Way too much Brylecream! Yuck!", "isprimary":"0"}, {"id":"2564913954", "secret":"81f7ab2cf8", "server":"3180", "farm":4, "title":"OrangeSprocket | Seansie McLuvin, Mischevious Grin. What's he up to?", "isprimary":"0"}, {"id":"2564914120", "secret":"290c52da20", "server":"3184", "farm":4, "title":"OrangeSprocket | Bill McGrath in Cheesy 70's Pose", "isprimary":"0"}, {"id":"2564914274", "secret":"d40c45080f", "server":"3026", "farm":4, "title":"OrangeSprocket | Bill McGrath in makeup", "isprimary":"0"}, {"id":"2564914462", "secret":"40e203c631", "server":"3152", "farm":4, "title":"OrangeSprocket | Bill McGrath in makeup", "isprimary":"0"}, {"id":"2564087743", "secret":"f5a1f7b77b", "server":"3185", "farm":4, "title":"OrangeSprocket | Bill McGrath in makeup", "isprimary":"0"}, {"id":"2564914876", "secret":"fd51e33329", "server":"3278", "farm":4, "title":"OrangeSprocket | Bill McGrath, OrangeSprocket Action News Anchorman Spoof", "isprimary":"0"}, {"id":"2564915012", "secret":"0c5aae9371", "server":"3049", "farm":4, "title":"OrangeSprocket | Bill McGrath, OrangeSprocket Action News Anchorman Spoof", "isprimary":"0"}, {"id":"2564088295", "secret":"1d407851c3", "server":"3152", "farm":4, "title":"OrangeSprocket | Bill McGrath, OrangeSprocket Action News Anchorman Spoof", "isprimary":"0"}, {"id":"2564088489", "secret":"38ae0de69f", "server":"3143", "farm":4, "title":"OrangeSprocket | Creative Director Jeff Curry and Senior Designer Becky Tibble", "isprimary":"0"}, {"id":"2564088633", "secret":"673d32b716", "server":"3256", "farm":4, "title":"OrangeSprocket | Creative Director Jeff Curry and Senior Designer Becky Tibble", "isprimary":"0"}, {"id":"2564915900", "secret":"e9d6deeca1", "server":"3127", "farm":4, "title":"OrangeSprocket | Becky Tibble, OrangeSprocket Action News", "isprimary":"0"}, {"id":"2564916062", "secret":"4c0f6d798e", "server":"3146", "farm":4, "title":"OrangeSprocket | Becky Tibble, OrangeSprocket Action News", "isprimary":"0"}, {"id":"2564089485", "secret":"b4208bdbd1", "server":"3274", "farm":4, "title":"OrangeSprocket | Zach Baisley. Why are these people always smiling?", "isprimary":"0"}, {"id":"2564916736", "secret":"4b8e19f63d", "server":"3277", "farm":4, "title":"OrangeSprocket | Becky, Always smiling!", "isprimary":"0"}, {"id":"2564917002", "secret":"915a8185d5", "server":"3128", "farm":4, "title":"OrangeSprocket | Jeff Curry and Kirk Shannon", "isprimary":"0"}, {"id":"2564090281", "secret":"340410a720", "server":"3265", "farm":4, "title":"OrangeSprocket | Becky Tibble, Jeff Curry and Kirk Shannon", "isprimary":"0"}, {"id":"2564090471", "secret":"3a6a378fe5", "server":"3035", "farm":4, "title":"OrangeSprocket | Seansie McLuvin", "isprimary":"0"}, {"id":"2564090993", "secret":"4f77c32b31", "server":"3018", "farm":4, "title":"OrangeSprocket | Paul MacNeil | Illustrator", "isprimary":"0"}, {"id":"2564091449", "secret":"c46ca7a58d", "server":"3275", "farm":4, "title":"OrangeSprocket | Kirk Shannon | Interactive Creative Director", "isprimary":"0"}, {"id":"2564918360", "secret":"4b169b1d28", "server":"3076", "farm":4, "title":"OrangeSprocket | Kirk Shannon | Interactive Creative Director", "isprimary":"0"}, {"id":"2564918578", "secret":"70c118411e", "server":"3031", "farm":4, "title":"OrangeSprocket | Kirk Shannon | Interactive Creative Director", "isprimary":"0"}, {"id":"2564092069", "secret":"117a8c9865", "server":"3068", "farm":4, "title":"OrangeSprocket | Seansie McLuvin", "isprimary":"0"}], "page":1, "per_page":500, "perpage":500, "pages":1, "total":"33"}, "stat":"ok"})

If I alert() out data in the items array, it all seems to be there, but it doesn't render on the page. Any thoughts on what I might be doing wrong?

evant
13 Jul 2010, 8:24 AM
Think about the order in which this gets executed:



portfolio.ui.FlickrCarousel = Ext.extend(Ext.Carousel, {
items: [],
initComponent: function(){

Ext.util.JSONP.request({
url: 'http://api.flickr.com/services/rest/',
callbackKey: 'jsoncallback',
params: {
method: 'flickr.photosets.getPhotos',
api_key: 'censored',
photoset_id: this.photosetid,
format: 'json'
},
scope: this,
callback: function(data){

for (var i = 0; i < 5; i++) {
this.items[i] = {
title: data.photoset.photo[i].title,
html: '<img src="http://farm' + data.photoset.photo[i].farm +
'.static.flickr.com/' +
data.photoset.photo[i].server +
'/' +
data.photoset.photo[i].id +
'_' +
data.photoset.photo[i].secret +
'.jpg" alt="' +
data.photoset.photo[i].title +
'" />'
}
}
console.log('b', new Date());
portfolio.ui.FlickrCarousel.superclass.initComponent.call(this);
// calling this waaaaaaaaay too late!
}
});
console.log('a', new Date());
console.log('exit initcomponent');
}
});

Ext.reg('portfolio-flickrcarousel', portfolio.ui.FlickrCarousel);

OliverD
13 Jul 2010, 8:33 AM
Good point. But if I change it to this:


portfolio.ui.FlickrCarousel = Ext.extend(Ext.Carousel, {
items: [],
initComponent: function() {

Ext.util.JSONP.request({
url: 'http://api.flickr.com/services/rest/',
callbackKey: 'jsoncallback',
params: {
method: 'flickr.photosets.getPhotos',
api_key: 'censored',
photoset_id: this.photosetid,
format: 'json'
},
scope: this,
callback: function(data) {

for (var i = 0; i < 5; i++) {
this.items[i] = {
title: data.photoset.photo[i].title,
html: '<img src="http://farm' + data.photoset.photo[i].farm +
'.static.flickr.com/' + data.photoset.photo[i].server +
'/' + data.photoset.photo[i].id +
'_' + data.photoset.photo[i].secret +
'.jpg" alt="' + data.photoset.photo[i].title +
'" />'
}
}

this.doLayout();
}
});

portfolio.ui.FlickrCarousel.superclass.initComponent.call(this);
}
});

It doesn't work either. Shouldn't the call to doLayout() redraw the carousel with the new items I've added?

evant
13 Jul 2010, 8:50 AM
No, in this case you want to use the add() method, not setting this.items[foo].

OliverD
13 Jul 2010, 8:54 AM
No, in this case you want to use the add() method, not setting this.items[foo].

Right, I just figured that out. Thanks for the prompt responses!