PDA

View Full Version : dynamically hide carousel item, redraw indicator



jeffzamo
28 Sep 2011, 10:09 PM
i have a simple carousel and want to dynamically hide one or more cards on (or before) activation. what is the best way to do this? i have tried hiding the cards, dolayout, etc without luck. in the following example, where would i place code to dynamically hide card2? the indicator also needs to be updated so that the proper number of dots appear based on the active items.



demos.Carousel = new Ext.Panel({
cls: 'cards',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [{
xtype: 'carousel',
items: [{
html: '<p>Navigate the carousel on this page by swiping left/right.</p>',
cls: 'card card1'
},
{
html: '<p>Clicking on either side of the indicators below</p>',
cls: 'card card2'
},
{
html: 'Card #3',
cls: 'card card3'
}]
}, {
xtype: 'carousel',
ui: 'light',
direction: 'vertical',
items: [{
html: '<p>Carousels can be vertical and given a <code>ui</code> of ‘light’ or ‘dark.’</p>',
cls: 'card card4'
},
{
html: 'Card #2',
cls: 'card card5'
},
{
html: 'Card #3',
cls: 'card card6'
}]
}]
})


thanks for any advice, i have been looking at this for a few days without much luck...

jeffzamo
9 Feb 2012, 3:50 PM
The solution to this is simply to use carousel .add, .remove or .removeall to manage cards dynamically.