Problematically Change Carousel...

[tyladurdan]

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/

  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

'Uncaught TypeError: Object #<HTMLDivElement> has no method 'getActiveIndex''.

Anyone have any ideas what's going on or how to fix it?

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


});

[Mthor]

have a look at your scope, might be out of scope

[aconran]

The variable crsl is an HTMLDivElement where you want it to be the carousel...

How did you get a reference to it?

[tyladurdan]

Hi,

Thanks for the reply, I did try the following code which you can see it is trying every 2 seconds in the console, but the pages are not turning:

Ext.define('MyApp.view.Carousel', {
    extend: 'Ext.carousel.Carousel',
    alias: 'widget.carousel',


    config: {
        id: 'carousel',
        listeners: [
            {
                fn: 'onCarouselPainted',
                event: 'painted'
            }
        ],
        items: [
            {
                xtype: 'container',
                html: '1',
                style: 'background-color: #ccc'
            },
            {
                xtype: 'container',
                html: '2',
                style: 'background-color: #aaa'
            }
        ]
    },


    onCarouselPainted: function(element, options) {
        console.log('Carousel Painted');
        setInterval(function () {
            carousel.next();
            if (carousel.getActiveIndex() === carousel.getMaxItemIndex()) {
                carousel.setActiveItem(0);
            }
        }, 2000); // setInterval()


    }


});

I tried useralias of 'carousel', the Classname is 'Carousel' and i even tried id and itemid of carousel but I get messages like:


Uncaught TypeError: Object #<HTMLDivElement> has no method 'next'


If I try an itemid of carousel I get the error:


Uncaught ReferenceError: carousel is not defined


If I remove itemid and id carousel, and just leave the useralias as 'carousel' I get carousel is not defined.

In the original example the whole carousel is defined as the variable 'crsl' and there are no xtypes as items inside the carousel as pages. Could the problem be that I have separate xtypes of containers as each page in my carousel? Not sure how to do it any other way in architect.

Thanks

[aconran]

If you assign an itemId you can get a reference to it from its direct container like so:

var myCarousel = this.getComponent('itemId');

If you assign an id you can get a reference to it globally like so:

var myCarousel = Ext.getCmp('globalId');

If you use an id you must be aware that they must be globally unique.

[tyladurdan]

Thanks a lot for the explanation, it works. I assumed that by setting an alias for the component it was enough to get a reference for it.

I think it gets a bit confusing how you are meant to call components when you have id, itemid and alias! Am I right in assuming that alias (xtype) is only used when linking components together, for example in my example they are children of the main container?

Thanks

[aconran]

An xtype is simply an alias, a string representation of the class to create.

[tyladurdan]

Thanks. It works great but is there a preferred practice for using 'this' vs ExtGetCmp?'

I have read numerous times that it is better practice to use something like this

var myCarousel = this.getMyCarousel();

Instead of:

var myCarousel = Ext.getCmp('MyCarousel');

Are there any benefits to using one over the other?

Also I renamed the title of this topic wrong but now cant seem to change it! Is it possible to change to 'programatically'?