Sencha Inc. | HTML5 Apps

Blog

Designing Responsive Applications with Ext JS

July 10, 2014 | Phil Guerrant

Ext JS 5 Executive Dashboard App

In today’s world, users expect to be able to use web applications not only on their desktop computers, but also their mobile devices, which come in all shapes and sizes. The requirement to make an application so adaptive can seem overwhelming. Fortunately Ext JS 5 provides all the tools needed to make your application conform to any screen size, shape or orientation.

Introducing responsiveConfig

With the new tablet support in Ext JS 5 comes “responsiveConfig”, a powerful new feature for making applications respond dynamically to changes in screen size or orientation. responsiveConfig is enabled using one of two classes:

  • Ext.plugin.Responsive: Adds responsive capabilities to an Ext.Component
  • Ext.mixin.Responsive: Adds responsive capabilities to any other class

Making Components Responsive

For performance reasons, Ext JS Components do not have responsive features enabled by default, so to make a Component responsive you’ll need to use the responsive plugin. Add the responsive plugin to the class body to make all instances responsive, or add it to the instance config to enable responsiveness for a single Component instance:

 
plugins: 'responsive'
 

Once you have added the responsive plugin to your Component config, your Component will gain a “responsiveConfig” configuration option. responsiveConfig is simply an object with keys that represent conditions under which certain configs will be applied. For example, suppose your application has a Tab Panel, and you want the Tab Bar to be left aligned in landscape mode, but top aligned in portrait mode. You can use the words “landscape” and “portrait” as keys in the responsiveConfig object to dynamically set the Panel’s 'tabPosition' config in response to device orientation change:

 
Ext.define('MyApp.view.Main', {
    extend: 'Ext.tab.Panel',
    plugins: 'responsive',
    responsiveConfig: {
        landscape: {
            tabPosition: 'left'
        },
        portrait: {
            tabPosition: 'top'
        }
    },
    items: [
        { title: 'Foo' },
        { title: 'Bar' }
    ]
});
 

Rules

Each key, or “rule”, in the responsiveConfig object is a simple JavaScript expression. The following variables are available for use in responsiveConfig rules:

  • ‘landscape’ - True if the device orientation is landscape (always ‘true’ on desktop devices)
  • ‘portrait’ - True if the device orientation is portrait (always ‘false’ on desktop devices)
  • ‘tall’ - True if ‘width’ is less than ‘height’ regardless of device type
  • ‘wide’ - True if ‘width’ is greater than ‘height’ regardless of device type
  • ‘width’ - The width of the viewport
  • height’ - The height of the viewport

You can combine these variables in a variety of ways to create complex responsive rules. For example, the following responsiveConfig hides a Component if the viewport is less than 768 pixels wide and the viewport’s height is greater than its width:

 
responsiveConfig: {
    'width < 768 && tall': {
        visible: true
    },
    'width >= 768': {
        visible: false
    }
}
 

Which Configs Can Be Responsive?

Internally, the framework monitors the viewport for resize and orientation change, and it re-evaluates all of the responsive rules whenever either one of these events occurs. Any matching rules will have setters called for all of their configs. This means that in order for a configuration option to be used with responsiveConfig, it must have a setter. In the above example, we can use “visible” as a responsiveConfig because Ext.Component has a setVisible() method.

Making Classes Responsive

responsiveConfig is most useful for Components, but sometimes you may find the need to make other classes respond to screen size as well. For classes other than Ext.Component, this is accomplished by mixing in Ext.mixin.Responsive. For example, an instance of the following class will have its “foo” config updated whenever the screen shape changes from “wide” to “tall” or vice versa:

 
Ext.define('MyClass', {
    mixins: ['Ext.mixin.Responsive'],
    config: {
        foo: null
    },
    responsiveConfig: {
        wide: {
            foo: 1
        },
        tall: {
            foo: 2
        }
    },
    constructor: function(config) {
        this.initConfig(config);
    },
    updateFoo: function(foo) {
        console.log(foo); // logs "1" or "2" as screen shape changes between wide and tall
    }
});
 

Try it Out

We wanted to make sure that the new responsive design features of Ext JS could stand the test of a real-world application, so we built an application that leverages responsiveConfig to adapt to a wide range of screen sizes and orientations on both desktops and tablets. The app can be found here.

Try resizing your desktop browser window, or rotating your tablet, and look for the following changes to the application’s presentation and layout:

  • Main navigation is positioned to the left in “wide” mode and to the top in “tall” mode
  • Tab icons are aligned to the top in “tall” mode, and to the left in “wide” mode
  • Tab text is centered in “tall” mode and left aligned in “wide” mode
  • In “tall” mode if the screen becomes too narrow for the navigation bar, an overflow menu tool will display, and the navigation items will display in a menu.

We’re sure that these new features of Ext JS 5 will make the task of developing cross-device applications a lot easier, and we hope you’ll give it a try. Who knows, you might even have fun!

There are 18 responses. Add yours.

TimG

5 months ago

Your MyBiz demo works on iOS but just freezes the screen on Android 4.3 Chrome and Windows Phone 8.1 IE 11, which is pretty much a show stopper…

FloSt

5 months ago

Same here, demo is pretty much unusable on a Nexus 5 with latest Chrome. “Crossplattform” not so much…

On PC it works like a charm and looks great

Richie Bartlett

5 months ago

Works great in my iPad Air.

barbatrukko

5 months ago

On Nexus 5 with 4.4.4 is unusable with chrome and firefox.

Tad

5 months ago

Cool idea! It’s about time this has been added to ExtJS! Unfortunately, it’s really buggy on an iPhone5 running iOS 7.1.1.  Maybe it’s just because it hasn’t been setup specifically for the phone dimensions in this demo?

Phil Guerrant

5 months ago

@TimG @Tad Ext JS doesn’t currently support phones.  Our current testing targets are all desktop, laptop, and tablet devices, so ymmv when it comes to iPhone/windows phone

@FloSt @barbatrukko @Tad The MyBiz app works for me on Android 4.2.2 with chrome 35 (Galaxy Tab).  I don’t have a Nexus handy but I know we tested on the Nexus prior to releasing 5.0.0.  Any further details you can provide would be helpful - we’ll look into it on our end as well.

Sawood Alam

5 months ago

I wish there is a variable to check RTL mode. I believe, responsive feature is such a potential feature to customize layouts based on language direction.

FloSt

4 months ago

I made screenshots and uploaded them. Hope it helps. http://imgur.com/a/TF2q8
Changing rotation pretty often breaks it all, as well as the content is not scaled correctly (cut off at the borders but no scrolling enabled), and sometimes there is no menu what so ever

Tom Coulton

4 months ago

The Japanese translation for this blog is here: http://www.xenophy.com/sencha-blog/11338

This is a link to the Sencha Japan user group: http://www.meetup.com/Japan-Sencha-User-Group/

KK

4 months ago

hello,
I have just started looking into extjs,
my question is how do I get the current width for the parent component (may be application), and pass it on to child component.

when I try following it doesnt work…

responsiveConfig: {
  ‘width < 768’: {
      width : ‘50%’
  },
  ‘width >= 768’: {
      width : ‘90%’
  }
}

But when I specify the hard coded values for width like ‘width : 100’ it works just fine.

Cant we specify the width in Percentage %, how to I fix the problem?

Tomas

4 months ago

Were can we find a full readable source code for the MyBiz app?

Richie Bartlett

4 months ago

@Tomas: While they don’t have a easy to read source, you could always use the http://jsbeautifier.org/ site to “un-minify” the script code.

Tomas

4 months ago

@Richie Bartlett
I know about beautifier but you still get stuff named a b c d… Normal source code would be much nicer.

Tien NN

4 months ago

It can be loaded good in Fire Phone: http://firephone3d.net/

Phil Guerrant

4 months ago

@Tomas the full source code of the MyBiz app is available in the SDK download under examples/executive-dashboard/

Phil Guerrant

4 months ago

@KK you may need to use a container layout.  That would be a good question to ask over in the forums.

Chris

4 months ago

Phil, can you point to where the SDK download is located. Trying to take a look at the source code for the MyBiz app. Thanks

Tomas

4 months ago

@Chris Scroll down to the bottom of the page -> http://www.sencha.com/products/extjs/details

Comments are Gravatar enabled. Your email address will not be shown.

Commenting is not available in this channel entry.