Is there a way to add items to a carousel dynamically? After a service returns data I create image links that should be displayed in a carousel. It's nothing fancy, and I can't seem to get additional items into the carousel. Here's sample code:

Code:
Ext.setup({
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    icon: 'icon.png',
    glossOnIcon: false,
    onReady: function() {
        // Create a Carousel of Items
        var carousel = new Ext.Carousel({
            id: 'isaacCarousel',
            ui: 'dark',
            height: 205,
            defaults: {
                cls: 'card'
            },
            items: [{
                contentEl: 'shelf1',
                cls: 'htmlcontent'
            },
            {
                contentEl: 'shelf2',
                cls: 'htmlcontent'
            },
            {
                contentEl: 'shelf3',
                cls: 'htmlcontent'
            },
            {
                contentEl: 'shelf4',
                cls: 'htmlcontent'
            },
            {
                contentEl: 'shelf5',
                cls: 'htmlcontent'
            },
            {
                contentEl: 'shelf6',
                cls: 'htmlcontent'
            },
            {
                contentEl: 'shelf7',
                cls: 'htmlcontent'
            }],
            listeners: {
                cardswitch : function() {
                    if(carousel.getActiveIndex() == 6)
                          setTimeout(function(){carousel.setActiveItem(0, {type: 'slide', direction: 'left'});}, 10000);
                      else
                          setTimeout(function(){carousel.next();}, 10000);
                }
            }


        });

        new Ext.Panel({
            fullscreen: true,
            layout: 'auto',
            height: 500,
            scroll: 'vertical',
            items: [carousel, promoTopLine, promos]
        })
    }
});