add element to carousel sencha - add

Question

In sencha touch, I have a carousel declared like this:
ajaxNav = new Ext.Panel({
scroll: 'vertical',
cls: 'card1 demo-data',
styleHtmlContent: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [{
xtype: 'carousel',
items: [{
id:'tab-1',
html: '',
cls: 'card card1'
},
{
id:'tab-2',
html: '<p>Clicking on either side of the indicators below</p>',
cls: 'card card2'
},
{
id:'tab-3',
html: 'Card #3',
cls: 'card card3'
}]
}]
});
Does anybody knows how to add elements dinamycally??

Answer 1

I write you a simple example to show you how to dinamically add a new panel to an existing Ext.Carousel element.
Ext.setup({
onReady: function() {
var ajaxNav = new Ext.Carousel({
fullscreen: true,
dockedItems: {
xtype: 'toolbar',
title: 'Demo',
items: [{
xtype: 'button',
ui: 'action',
text: 'Add',
handler: function(){
var element = new Ext.Panel({
html: 'New Element'
});
ajaxNav.add(element);
ajaxNav.doLayout();
}
}]
},
items: [{
id:'tab-1',
html: '',
cls: 'card card1'
},{
id:'tab-2',
html: '<p>Clicking on either side of the indicators below</p>',
cls: 'card card2'
},{
id:'tab-3',
html: 'Card #3',
cls: 'card card3'
}]
});
}
});
As you can see, on the "Add" press button event, you first have to define your panel according to your needs, then add it to your carousel, and, the most important thing, you have to let the carousel recalculate his layout calling the "doLayout()" function.
Hope this helps.