Problematically Change Carousel...
Hi,
I've been trying to adapt some working code for Architect but I'm having some difficulty.
I've seen the working example here: http://try.sencha.com/touch/2.0.0/demos/Ext.Carousel.next/
Code:
setInterval(function () { crsl.next();
if (crsl.getActiveIndex() === crsl.getMaxItemIndex()) {
crsl.setActiveItem(0);
}
}, 2000); // setInterval()
} // launch
but when I try and adapt to Architect I'm not sure where to put this bit. I've tried a few variations but always get an error.
If I try the code below, which is another variation, I can see in the console something is happening every second, but I get the error
Code:
'Uncaught TypeError: Object #<HTMLDivElement> has no method 'getActiveIndex''.
Anyone have any ideas what's going on or how to fix it?
Code:
Ext.define('MyApp.view.HomeContainer', { extend: 'Ext.Container',
config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'carousel',
flex: 0.5,
delay: '3000',
start: 'true',
id: 'carousel',
itemId: 'mycarousel',
items: [
{
xtype: 'container',
html: 'red',
style: 'background-color:#f00;'
},
{
xtype: 'container',
html: 'orange',
style: 'background-color:#ffb600;'
},
{
xtype: 'container',
html: 'yellow',
style: 'background-color:#ff0;'
},
{
xtype: 'container',
html: 'green',
style: 'background-color:#80ff4d;'
},
{
xtype: 'container',
html: 'blue',
style: 'background-color:#009dff;'
}
],
listeners: [
{
fn: function(element, options) {
carousel.pageTurner = new Ext.util.DelayedTask(function() {
if (carousel.getActiveIndex() == carousel.items.length - 2) {
carousel.setActiveItem(0, 'slide');
}
else {
carousel.next();
}
}, carousel);
carousel.pageTurner.delay(1000);
},
'activeitemchange': function(carousel){
if (carousel.getActiveIndex() == 0) {
carousel.fireEvent('show',this);
} else
carousel.pageTurner.delay(1000);
},
event: 'painted'
}
]
},
{
xtype: 'container',
flex: 0.5
}
]
}
});