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

      0  

    Default Problematically Change Carousel...

    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
    456
    Vote Rating
    13
    Mthor will become famous soon enough

      0  

    Default


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

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,883
    Vote Rating
    101
    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
    Sencha Architect Development Team

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

      0  

    Default Tried this...

    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 - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,883
    Vote Rating
    101
    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
    Sencha Architect Development Team

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

      0  

    Default Thanks

    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 - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    8,883
    Vote Rating
    101
    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
    Sencha Architect Development Team

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

      0  

    Default ExtgetCmp vs this

    ExtgetCmp vs this


    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

    Code:
    var myCarousel = this.getMyCarousel();
    Instead of:

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

Thread Participants: 2

Tags for this Thread

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar