1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Rennes - France
    Posts
    172
    Answers
    2
    Vote Rating
    1
    Thierryg is on a distinguished road

      0  

    Default Answered: pre/post callback between each carousel transition

    Answered: pre/post callback between each carousel transition


    Hi,

    I have a carousel and i wanna know if it is possible to launch an action when i leave a one item and another action when switch to.

    In other words, can i define callbacks (pre and post) called between item transition.

    Indeed, i wanna start and/or stop some points before or after a transition.

    I join a diagram that explain the state diagram i want to use.

    Thanks in advance for your reply.

    Regards
    Attached Images

  2. You can use the activeitemchange event with the before and after order option.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Answers
    3356
    Vote Rating
    751
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You can use the activeitemchange event with the before and after order option.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    Rennes - France
    Posts
    172
    Answers
    2
    Vote Rating
    1
    Thierryg is on a distinguished road

      0  

    Default


    Thanks, it works fine as expected using the following code :

    Code:
            horizontalCarousel.on("activeitemchange", function(me, value, oldValue, index)
            {
                console.log(horizontalview[this.getActiveIndex()] + '-' + this.getActiveIndex());
            });
    And my whole code :

    Code:
    var Myapp = Ext.application(
    {
        name:   'Myapp',
        launch: function()
        {
            var horizontalCarousel;
            var verticalCarousels = [];
            var items, i, j;
                
            /* ------------------------------------------------ */
            /*                 Vertical items                   */
            /* ------------------------------------------------ */
            //alert("nbHorizontalItems="+nbMaxMainScreen);
            for ( i=0 ; i<nbMaxMainScreen ; i++ )
            {
                items = [];
                    
                /* ------------------------------------------------ */
                /*              Horizontal items                    */
                /* ------------------------------------------------ */
                //alert("nbVerticalItems="+nbMaxSubScreenPerMainScreen[i]);
                for ( j=0 ; j<nbMaxSubScreenPerMainScreen[i] ; j++ )
                {
                    //alert("i="+i+"/j="+j);
                    //alert("content["+i+"]["+j+"]="+mainScreen[i][j]);
                    items.push(
                    {
                        html : mainScreen[i][j],
                        style: 'background-color: #FFFFFF'
                    });
                }
    
    
                /* ------------------------------------------------ */
                /*             Fill vertical's carousel             */
                /* ------------------------------------------------ */
                verticalCarousels.push(
                {
                    xtype:               'carousel',
                    direction:           'vertical',
                    cardSwitchAnimation: 'slide',
                    directionLock:       true,
                    id:                  vcarousselID[i],
                    items:               items,
                    itemConfig:
                    {
                        cls: 'my-carousel-item'
                    }
                });
            }
            
            /* -------------------------------------------------- */
            /* Link the vertical carousel with the horizontal one */
            /* -------------------------------------------------- */
            horizontalCarousel = Ext.Viewport.add(
            {
                xtype:               'carousel',
                direction:           'horizontal',
                cardSwitchAnimation: 'slide',
                id:                  'hcarouselID',
                items:               verticalCarousels
            });
    
    
            /* -------------------------------------------------- */
            /* Define callbacks for horizontal transition         */
            /* -------------------------------------------------- */
            horizontalCarousel.on("activeitemchange", function(me, value, oldValue, index)
            {
                console.log(horizontalview[this.getActiveIndex()] + '-' + this.getActiveIndex());
    
    
    
    
    
    
            });
            
            /* -------------------------------------------------- */
            /* Initialize the default horizontal carousel         */
            /* -------------------------------------------------- */
            //horizontalCarousel.setActiveItem(hcurcarousel);           // Horizontal init
            //horizontalCarousel.getActiveItem().setActiveItem(0);      // Vertical   init
        }
    });

Thread Participants: 1

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