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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    898
    Answers
    3575
    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


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


    Hey,

    Thanks
    It works exactly like what i wanted to be

    Another way i got is to stop event propagation while touch events on canvases...

Thread Participants: 1