PDA

View Full Version : Dynamic carousel



tbleckert
22 Feb 2011, 6:38 AM
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
22 Feb 2011, 10:21 AM
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
22 Feb 2011, 10:31 AM
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
4 Dec 2011, 2:19 AM
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
12 Dec 2011, 1:28 PM
Probably missing the myComponent.superclass.initComponent.apply(this,arguments)