Threaded View

  1. #1
    Sencha User AkashSaikia's Avatar
    Join Date
    Oct 2011
    Location
    Mumbai, India
    Posts
    33
    Vote Rating
    0
    Answers
    1
    AkashSaikia is on a distinguished road

      0  

    Default Answered: Stop navigation carosel animation

    Answered: Stop navigation carosel animation


    Hi,

    I have a carousel with four panels.

    Its working fine, i am able to navigate from one to second and so on.

    My 4th panel has one Canvas for drawing.

    Now my problem is that i want i can have a button as Hand tool and Draw tool.

    When i start drawing, the carousel changes the page as usual, but i dont want to change the page at this time as the user is drawing something.

    How to stop this event when i am drawing , and bing the event again when i select the hand tool?

    Any help is much appreciated.

    Thanks.

  2. I was hoping suspendEvents would work but didn't so here's another way (remove listeners):

    Code:
    new Ext.carousel.Carousel({
        fullscreen : true,
        items      : [
            {
                xtype  : 'toolbar',
                docked : 'top',
                items  : [
                    {
                        text    : 'Stop Swipe',
                        handler : function(button) {
                            var carousel = button.up('carousel'),
                                element  = carousel.element;
    
                            element.un({
                                dragstart : 'onDragStart',
                                drag      : 'onDrag',
                                dragend   : 'onDragEnd',
                                scope     : carousel
                            });
                        }
                    },
                    {
                        text    : 'Start Swipe',
                        handler : function(button) {
                            var carousel = button.up('carousel'),
                                element  = carousel.element;
    
                            element.on({
                                dragstart : 'onDragStart',
                                drag      : 'onDrag',
                                dragend   : 'onDragEnd',
                                scope     : carousel
                            });
                        }
                    }
                ]
            },
            {
                html : 'One'
            },
            {
                html : 'Two'
            },
            {
                html : 'Three'
            }
        ]
    });

Thread Participants: 1