Dynamic carousel

[tbleckert]

Hi! Just started with models by following the MVC tutorial, so I ended up with this list:

expolinc.views.ProductsList = Ext.extend(Ext.Panel, {
    dockedItems: [{
        xtype: 'toolbar',
        title: 'Products'
    }],
    items: [{
        xtype: 'list',
        store: expolinc.stores.products,
        itemTpl: '{name} {imagesrc}',
        onItemDisclosure: function (record) {
            Ext.dispatch({
                controller: expolinc.controllers.products,
                action: 'show',
                id: record.getId()
            });
        }
    }],
    initComponent: function() {
        expolinc.stores.products.load();
        expolinc.views.ProductsList.superclass.initComponent.apply(this, arguments);
    }
});

But I've tried for like an hour now to transform this into a carousel, can anyone give me a hand?
Thanks!

[gcallaghan]

How do you want to change this into a carousel? A carousel has an item per page.

from the docs:
http://dev.sencha.com/deploy/touch/docs/

var carousel = new Ext.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'
        }
    ]
});

You could use the initComponent overloading and the Carousel's add function to add components to from the store.

i.e.

initComponent:function(){
    ...
    var me = this;
    expolinc.stores.products.each(function(item){
        me.add({html:'<div>'+item.name+'</div>'});
    });
    me.doComponentLayout();
}

[tbleckert]

Yes, I know that the Carousel has items, so does the list. Therefore, the list items becomes carousel items Will try your code and get back to you. Thanks!

[SixteenBits]

initComponent:function(){
    ...
    var me = this;
    expolinc.stores.products.each(function(item){
        me.add({html:'<div>'+item.name+'</div>'});
    });
    me.doComponentLayout();
}

Hi i've tried this exemple it did not worked. in another hand it does work when i put it with an event trigger

this.on('show', function() {            
var me = this;
...
});

but i don't wana do it on 'show' event, i need to do it only one time when the view is created.

thanks !

[Champi]

Probably missing the myComponent.superclass.initComponent.apply(this,arguments)