Results 1 to 3 of 3

Thread: pre/post callback between each carousel transition

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Location
    Rennes - France
    Posts
    172
    Answers
    2
    Vote Rating
    1
      0  

    Default 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 Attached Images

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

  3. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      0  

    Default

    You can use the activeitemchange event with the before and after order option.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Location
    Rennes - France
    Posts
    172
    Answers
    2
    Vote Rating
    1
      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
        }
    });

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •