Ext JS on Tap


One of the major announcements at SenchaCon this year was that Ext JS will be adding support for touch-enabled devices. When people think about touch interfaces, they tend to focus primarily on phones and perhaps secondarily on tablets. While touch interfaces may have been (re)born on these devices, the reality is that touch input is rapidly becoming ubiquitous. You will find touch screens on mid-range laptops and even some of the new desktop models.

If you combine this proliferation of touch enablement with the BYOD (Bring Your Own Device) explosion, it is not hard to understand why many developers are looking to optimize the touch experience of their Ext JS applications.

So let’s see how this support is taking shape!

The Sencha-Core Package

The support for touch-enabled devices has, to date, been exclusive to Sencha Touch. To enable touch gestures for Ext JS, we have merged the core of the two frameworks (Sencha Touch and Ext JS) and created a sencha-core package.

The sencha-core package contains many of the items you might expect: The Class System, Dynamic Loader, Feature Detection, Utilities (such as XTemplates) and others. Much could be said about these subsystems and how they have been unified, but the focus of this article is the code specifically related to touch events.

Gestures and Event Normalization

One of the disadvantages of not being aware of touch inputs is that, while the browser translates native touch events into other events such as click, there is a 300 millisecond or so delay introduced during the translation. This delay negatively impacts the user experience by making even simple interactions appear sluggish.

The ability to translate native touch events into higher-level, synthetic events (or “gestures”) is one of the key pieces we’ve moved from Sencha Touch to the sencha-core package. This extensible system translates a sequence of touch events such as “touchstart followed by touchend”, into the “tap” gesture which is then dispatched as any other event.

The tap gesture is semantically equivalent to a click event and, in fact, Ext JS will (where appropriate) translate listeners for the click event like so:

listeners: {
        click: onClick

May (based on device) be translated into this:

listeners: {
        tap: onClick

A similar translation applies to events such as:

  • mousedown to touchstart
  • mousemove to touchmove
  • mouseup to touchend
  • dblclick to doubletap

It is common, of course, to also listen directly to gesture events (like pinch). When doing so, it is important to remember that these may not be interactions that your user can initiate based on the device they are using.

Takeaway #1: Always use the framework API to set up your event listeners and let the framework juggle the device support for you.

Takeaway #2: Favor traditional mouse events for simple things and allow the framework to handle the optimal translation to gestures.

Global Event Delegation

To support the gesture system in Sencha Touch 2.0, we introduced a new strategy for managing event listeners that also greatly reduced the number of attached DOM-level listeners. The idea being to listen to bubbled events only at the root of the document, check for gestures and delegate as necessary from those few listeners to user code.

The effect of this approach is undetectable unless user code goes around the framework API to set up event listeners. The ability to understand the intent of user code and not rely on direct attachment of listeners to DOM elements is likely to play an even bigger role in normalizing events for devices that support both mouse and touch events.

All touch events and gesture listeners are handled in this manner. We are investigating whether or not to use this approach for all event listeners and welcome your feedback on this feature.

Takeaway #3: Always use the framework API to set up your event listeners and let the framework sort out who is listening to what events.

Momentum Scrolling

One of the surprising deficiencies of mobile browsers is their treatment of scrollable area in the browser. Unlike native applications, these areas don’t process “momentum” and therefore provide a sub-par user experience. In other words, while native browser scrolling behavior may be optimal on desktop browsers using a mouse, this is not the case on mobile devices. As such momentum scrolling was one of the most popularly requested features related to touch support.

The normal way a component indicates that it wants to enabling scrolling is the autoScroll config like so:

Ext.create('Ext.panel.Panel', {
        autoScroll: true,

On desktop browsers this will set the overflow style as you would expect. On mobile devices, however, this will instead create the necessary scrolling elements to enable momentum scrolling.

When to use Ext JS on Tablets?

With all of this additional device support coming into Ext JS via sencha-core, many developers have questions about when to use Ext JS vs. Sencha Touch. The answer is simple to state but takes consideration to apply: each framework has unique features and device support and developers have to chose between them based on their applications’ requirements.

In some cases, this may mean writing two applications: an Ext JS desktop application and a Sencha Touch mobile application. This is not entirely unexpected given the disparity in form factors: it is common to design different interfaces across these devices to improve the user experience.

While it is true that applications targeting a 27” desktop display and an iPhone may build multiple interfaces, things get murky when targeting the space in between. For tablets and laptops, should you upsize a Sencha Touch application or downsize an Ext JS application?

Because there is no one-size-fits-all answer, having touch support in Ext JS removes a critical item from this set of mutually exclusive features. Perhaps your application needs certain Ext JS-only features or maybe you already have an Ext JS application. With the new support for touch events, your Ext JS applications will be ready for tablets!

Written by

Don is the Engineering Director for Ext JS and Sencha Touch. He was an Ext JS user for 2 years before joining Sencha and has more than 25 years of software engineering experience on a broad range of platforms. His experience includes designing web application front-ends and back-ends, native GUI applications, network protocols and device drivers. Don’s passion is to build world class products that people love to use.


  1. Vincent Clair says

    Hi, it was one month ago this post was published.
    We currently develop a new project, and we have just finished structure and base application. It is the time of the front concept, and we need it ;)
    Any news on a release date and version targeted ?

  2. mj says

    Hi, I’m also very curious about when this will be released. This is a critical point for our new project when evaluating tech stack. Basically – no touch support = no go.

    Would be great to hear at least if it’s going to happen in 2013 Q4 or later :)

    PS. Congratz on great job with modernizing ExtJS!

  3. Gabe Sidler says

    This is right on target!! I am really excited about this news. Covering the whole spectrum of mobile to desktop clients has become really challenging for us app developers. Touch support in EXT JS will help a lot.

Leave a Reply

Your email address will not be published. Required fields are marked *