JS Days 2025 Replays are now live! Watch all sessions on-demand Watch Now

Supercharge Your JavaScript Mobile Apps With Touch

September 1, 2021 2846 Views

Supercharge Your JavaScript Mobile Apps With Touch

Touchscreens are available on a variety of devices, ranging from smartphones to tablets. They have taken the way we interact with and design our applications to a whole new level. People love to use their phones, tablets and other touch devices. As a result, developers are giving more thought to building quality applications for touch screen devices — it is now a top priority for responsive UX design.

A large part of touch UX design is ensuring the apps you design respond intuitively to your user’s needs. One of the best ways to supercharge your Ext JS cross-platform web applications is with Sencha Touch effectively. In this post, we will show how.

What is Sencha Touch?

Sencha Touch is a JavaScript framework designed for developing applications for mobile devices. It can be used to develop data-intensive web apps for a wide spectrum of platforms including touchscreen laptops, smartphones, and tablets. More importantly, It helps you to develop mobile applications for both Android and iOS easily while maintaining a native look and feel.

Once a stand-alone product, Sencha Touch is no longer supported on its own. Instead, its core functionality has merged with Ext JS, which provides you with an even more powerful suite of tools to conveniently develop all of your cross-platform mobile and web applications.

How to implement touchscreen support on Ext JS?

Implementing Touch is even easier now that it is a part of the Ext JS JavaScript framework for smartphones, tablets, and touchscreen laptops. More than ever, the applications you build with ExtJS run seamlessly a variety of devices — all with little or no modification. Here are three ways to implement touchscreen support:

Event Normalization

The first way to implement Touch on a device using Ext JS is Event Normalization. Event Normalization refers to the process of translating simple mouse events to their equivalent touch and pointer events. Simply put, it enables your Ext JS application to run flawlessly on touchscreen devices.

Here is how it works: If your code requests a listener for a mouse event, Ext JS attaches an equivalent touch or pointer event to the request. For example, here is a scenario where the application attempts to attach a mousedown listener with the following code:

myElement.on('mousedown', someFunction);

If the device supports touchscreen events, the event system translates mousedown to touchstart:

myElement.on('touchstart', someFunction);

In cases where your devices support pointer-events, the event system translates mousedown to pointerdown:

myElement.on('pointerdown', someFunction);

As you can see, you can implement touchscreen support in the form of Event Normalization for your Ext JS web applications is very easy. There is no complexity and very little code you need to write to make it work.

Gesture System

Gesture systems are another way to implement touchscreen support in ExtJS. From a browser’s perspective, there are three types of events: touch, pointer, and mouse. Upon interpreting their sequence and timing, Ext JS can synthesize more complex events, like drag, swipe, and tap.

To enable your Ext JS application to listen for specific gesture events like longpress, you just need to use this single line:

Ext.get('myElement').on('longpress', handlerFunction);

Origionally, Sencha Touch was specifically designed for touch events. Now, however, Ext JS offers full support for pointer and mouse events using the Gesture System. Gestures respond to any type of input –they can be triggered using both touch input and single-point gestures, like tap and swipe. The end result is a versatile gesture system that works seamlessly across all modern devices.

Touch Scroller

Finally, there is the touch scroller. Some mobile Webkit browsers lack momentum scrolling and scroll position indicators. This can be cumbersome and it can result in a tedious and unintuitive user experience. To solve this issue, Sencha Touch utilizes the “touch scroller,” which implements momentum scrolling with scroll indicators using JavaScript. You don’t have to write any code to turn the touch scroller on. It is enabled by default in web browsers where native scrolling is less than optimal.

Should I use Ext JS for developing applications for touchscreen devices?

In short, if you want to develop your apps quickly, easily and efficiently, yes you should Ext JS to develop applications for touchscreen devices. Ext JS will save you time and effort. It enables normalized events and gesture recognition by default. This means that, in most cases, you don’t have to take any special action to activate touchscreen support for your application. So, yes, you should definitely consider using Ext JS.

Ext JS is a feature-rich JavaScript framework for developing cross-platform web applications. Try it now for free.

Recommended Articles

Why Rapid Ext JS Is Ideal for Developers Who Need Speed, Scalability, and Rapid Application Development

Rapid Ext JS, which is an Extended JavaScript framework, speeds up app development using low-code tools. It makes building apps that can grow with your…

Top 5 Front-End Frameworks for Custom Software Development in 2025

Custom software needs the right tools to stay fast, flexible, and reliable. Off the shelf solutions often fall short, so teams turn to experts who…

JS Days 2025 – Where JavaScript Mastery Meets Modern Engineering

The JavaScript ecosystem evolves at a relentless pace. Frameworks emerge, tools iterate, and AI redefines paradigms. For developers navigating this landscape, JS Days 2025 (August…

Guide to Estimating ROI When Switching From DIY Libraries to Full Software Development Platforms Like Ext JS

Teams started with Do It Yourself, or DIY, JavaScript tools like jQuery and Bootstrap. But those fall apart as projects scale. Scattered code, user interface…

Top Frameworks Developers Are Using for Custom Software Development in 2025

We’re seeing it more every year; teams aren’t settling for plug-and-play tools anymore. In healthcare, finance, logistics, and other data-heavy industries, there’s a clear shift.…

Meet Sencha AI Coding Companion: Your AI-Powered Assistant for Faster Ext JS Development

Building modern web applications should be exciting. But too often, developers find themselves buried in documentation, endlessly Googling framework quirks, or stuck solving the same…

View More

Trusted by Top Developers: Learn how to enhance your development journey — for free

Get the latest newsletter keeping thousands of developers in the loop.

Loved by developers at
JSDays Replay