Hybrid View

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Posts
    61
    Vote Rating
    4
    tyladurdan is on a distinguished road

      0  

    Default 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
                }
            ]
        }
    
    
    });

  2. #2
    Sencha Premium Member
    Join Date
    Nov 2007
    Location
    Moore, Oklahoma
    Posts
    503
    Vote Rating
    18
    Mthor will become famous soon enough Mthor will become famous soon enough

      0  

    Default

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

  3. #3
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,487
    Vote Rating
    139
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

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

    How did you get a reference to it?
    Aaron Conran
    @aconran

  4. #4
    Sencha User
    Join Date
    Jul 2012
    Posts
    61
    Vote Rating
    4
    tyladurdan is on a distinguished road

      0  

    Default Tried this...

    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:

    Code:
    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

  5. #5
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,487
    Vote Rating
    139
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

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

    Code:
    var myCarousel = this.getComponent('itemId');
    If you assign an id you can get a reference to it globally like so:

    Code:
    var myCarousel = Ext.getCmp('globalId');
    If you use an id you must be aware that they must be globally unique.
    Aaron Conran
    @aconran

  6. #6
    Sencha User
    Join Date
    Jul 2012
    Posts
    61
    Vote Rating
    4
    tyladurdan is on a distinguished road

      0  

    Default Thanks

    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

  7. #7
    Sencha User aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,487
    Vote Rating
    139
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default

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

Thread Participants: 2

Tags for this Thread