PDA

View Full Version : Need help dynamically adding cards to a carousel



logicmedia
20 Jul 2010, 3:13 PM
Hi there,

I'm trying to make an extension in which I have a Panel with a carousel. I want to dynamically add cards to the carousel, but can't get it to work. I have isolated my problem in the test code below:



Ext.ns('test');
test.carousel = Ext.extend(Ext.Panel, {
fullscreen: true,
layout: 'fit',
initComponent : function() {
var cardItems = [];
cardItems.push(new Ext.Container({
scroll: 'vertical',
styleHtmlContent: true,
html: 'Loading...'
}));

this.carousel = new Ext.Carousel({
items: cardItems
});
this.items = [this.carousel];

test.carousel.superclass.initComponent.call(this);

this.on('afterrender', function() {
this.load();
});
},

load: function() {
// this.carousel.removeAll(); // <<==== Point A
this.carousel.add(new Ext.Container({
scroll: 'vertical',
styleHtmlContent: true,
html: 'Card 1'
}));
this.carousel.add(new Ext.Container({
scroll: 'vertical',
styleHtmlContent: true,
html: 'Card 2'
}));
this.carousel.doLayout();
}
});


Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,
onReady: function() {
var panel = new test.carousel({
});
}
});
As the example stands it works when the function load() gets called two cards are added. However if the line (Point A) is activated to remove all items from the carousel before adding the new items - it stops working!!

Ideally I don't really need to add a card in the initComponent - this was just the only way I could get anything to work. My need is to be able to add cards to the carousel fra the load function - but I simply don't know how to.

Any help would be much appriciated.

- Thomas

evant
20 Jul 2010, 6:16 PM
All you're missing is:



this.carousel.setCard(0);


Before you call doLayout.

logicmedia
20 Jul 2010, 9:54 PM
That actually makes a lot of sense... Thanks a lot.