add element to carousel sencha

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??

score 6 · Accepted Answer · answered May 31 '11 at 15:10

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.

You are welcome José. Sure, open another question and I will reply immediately. I prefer another question bacause that's even usefull to other users that are searching for the same thing. — Andrea Cammarata, May 31 '11 at 15:37
http://stackoverflow.com/questions/6190094/clear-all-elements-of-a-carousel-sencha — José Carlos, May 31 '11 at 15:48

add element to carousel sencha

1 Answers1