-
21 May 2012 6:53 AM #1
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.
-
Best Answer Posted by mitchellsimoens
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' } ] });
-
23 May 2012 5:06 AM #2Sencha - Senior Forum Manager
- Join Date
- Mar 2007
- Location
- St. Louis, MO
- Posts
- 33,581
- Vote Rating
- 433
- Answers
- 3100
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
________________
http://www.JSONPLint.com - Source to lint your JSONP!
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 almost in print!
When posting code, please use BBCode's CODE tags.
-
23 May 2012 5:58 AM #3
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...



Reply With Quote