Gallery for ExtJS 6 with touch event support

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 the article is the lack of support for gestures when viewing images using standard tools. There is no touch event support for scaling in the standard carousel component. This article is intended to correct this shortcoming.

Touch events

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

Support for touch events in ExtJS

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

• DoubleTap - double quick tap
• Drag - Drag and Drop
• EdgeSwipe - drag from the edge of the container
• LongPress - Long Press
• Pinch - see image above
• Rotate - rotate, see image above
• Swipe - flipping from the center of the container
• Tap - flipping from the center of the container

We omit the creation of a test application, because this is described in previous articles .
To display the image gallery, modern toolkit offers its own carousel component , of the most important drawbacks of the lack of scaling and image rotation. This problem 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, not having a personal blog. I hope he comes in handy for someone. Carried out the following list of works:

• Rewritten work logic to support ExtJS 6
• Fixed bugs related to scaling and flipping
• Optional parameters have been added to carousel allowing displaying a toolbar that contains an image counter, buttons for rotating and downloading this image (convenient if you are viewing documents)
• Added rotation and image download events

Link to github

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