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
            }
        ]
    }


});