EXT JS DEVELOPING RESPONSIVE APPLICATIONS

Creating responsive web applications have been made easier with the arrival of the new JavaScript Framework Ext JS 5. In this article let's look at how we can use responsiveConfig to implement this feature.

Introducing responsiveConfig

The powerful new feature responsiveConfig, for tablets, makes 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

To make a Component responsive you need to use the responsive plugin, because Ext JS Components' responsive features are not enabled by default for performance reasons. So you have to do one of the following:

• 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'

Your Component will gain a responsiveConfig configuration option, when you have added the responsive plugin to your Component config. responsiveConfig is simply an object with keys that represent conditions under which certain configs will be applied. Let's consider the following scenario:

In you application Tab Panel, to dynamically set the Panel’s tabPosition config in response to device orientation change

Moving to code:

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

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

responsiveConfig: {
    'width < 800 && tall': {
        visible: true
    },
    'width >= 800': {
        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 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
    }
});