ExtJS 6 gallery with touch events

Good afternoon, now I will try to describe the creation of an image gallery for mobile devices in ExtJS 6 (modern toolkit). The main reason for creating an article is the lack of support for gestures when viewing images by standard means. The standard carousel component does not support touch events for scaling. This article is intended to correct this shortcoming.

Touch events

At the moment there are not many main touch-events, you can see the main list in the image:

Support for touch events in ExtJS

Support for touch events was added to ExtJS 5. In the latest available version of ExtJS 6.0.1.250, the following touch events exist (you can draw an analogy with a picture):

• DoubleTap - double quick tap
• Drag - dragging
• EdgeSwipe - drag from the edge of the container
• LongPress - long press
• Pinch - see image above
• Rotate - turn, see image above
• Swipe - flipping from the center of the container
• Tap - flipping from the center of the container

Omit the creation of a test application, because it is described in previous articles .
To display the image gallery, the modern toolkit offers its carousel component, the most important drawbacks is the lack of scaling and rotation of images. This task has already been solved on the official forum, but only for the old version of Sencha Touch 2.0.1.1 . I will leave the rewritten plugin here, for not having a personal blog. I hope he will come in handy. Conducted the following list of works:

• Rewritten work logic to support ExtJS 6
• Fixed bugs related to scaling and scrolling
• In the carousel, optional parameters have been added that allow you to display a toolbar that contains an image counter, buttons to rotate and download this image (conveniently if you view documents)
• Added image rotation and download events.

Github link

PS: If you find bugs, write in the comments or on github, I will always be happy to help.
')