"Translator" uses Ext JS to design responsive applications

Original: Designing responsive applications with EXT JS

In today's era, users want Web applications to be available on both desktop and mobile devices, both in shape and size. Enables applications to adapt to different requirements and become increasingly trending. Fortunately, Ext JS 5 provides all the tools that support the application to fit any screen size, shape, and orientation.

Responsiveconfig Overview

To enable the Ext JS 5 to support the new tablet, you need to use "Responsiveconfig", a powerful new feature that allows the application to respond dynamically based on the screen size and orientation. Use one of the following two classes to enable Responsiveconfig:

• Ext.plugin.Responsive: Add responsiveness for Ext.component
• Ext.mixin.Responsive: Adding responsiveness to other classes
  

Implementing a response in a component

For performance reasons, the Ext JS component does not have a response enabled by default, so if you want the component to enable responsiveness, you need to use a response plug-in. Adding a response plug-in to a class allows the instance to implement a response, or add it to the instance's configuration object to turn on the response function in a single component instance:

Plugins: ' Responsive '

Once the response plug-in is added to the component's configuration object, the component gets a configuration item named Responsiveconfig. Responsiveconfig is just an object that contains a response condition, and the configuration that satisfies the condition should be displayed, for example, if you have a label panel in your application, and you expect the tab bar to appear on the left in landscape mode and at the top when in vertical mode, you can use the landscape "and" Portrait "as Keys to the Responsiveconfig object to dynamically set the panel's tabposition configuration items in response to changes in device orientation:

Ext.define (' MyApp.view.Main ', {    extend: ' Ext.tab.Panel ',    plugins: ' Responsive ',    responsiveconfig: {        Landscape: {            tabposition: ' Left '        },        portrait: {            tabposition: ' Top '        }    ,    items: [        { Title: ' Foo '},        {title: ' Bar '}    ]});

Rules

Every key, or rule, in the Responsiveconfig object is just a simple javascript expression. The following variables can be used as rules for the Responsiveconfig object:

• ' Landscape '-true if device orientation is vertical (always true on desktop device)
• ' Portrait '-true if device orientation is horizontal (always false on desktop device)
• ' Tall '-true if the width is less than the height, regardless of any device
• ' Wide '-true if broadband is greater than height, regardless of any device
• ' Width '-breadth of the viewport
• Height '-Heights of viewport
  

You can combine these variables in different ways to create complex response rules, for example, the following responsiveconfig hides components when the viewport width is less than 768 pixels and the height is greater than its width:

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

Which configuration will be responded to?

Internally, the framework monitors changes in the size and direction of the viewport, and recalculates all response rules when any of these events occur. Any matching rule in the configuration invokes the Modify method (setter), which means that for configuration items that are used in responsiveconfig, it must have a modification method, such as visible in the above example. is because Ext.component has a setvisible method.

Let class respond

Responsiveconfig is typically used for components, but sometimes it may be necessary to have the class respond to the screen size. For non-ext.component classes, they can be implemented by mixing Ext.mixin.Responsive, for example, instances of the following classes update the value of Foo when the screen shape changes from tall to wide, and 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    }});

Give it a try.

To ensure that real-world applications designed with the new responsive design features of Ext JS can stand the test, we have created an application that leverages responsiveconfig to accommodate a wide range of screen sizes and orientations, such as desktops and tablets, which can be downloaded here.

Try resizing the Desktop browser window or rotating your tablet, and observe the performance and layout changes of the following applications:

In the wide mode, the main navigation will be positioned on the left, while the top mode is positioned on the front.
In tall mode, the label icon will be on the top of the Zieux, while in wide mode it will be aligned to the left.
In tall mode, the label text will be centered, while the wide mode will be aligned to the left.
In tall mode, the screen becomes very narrow for the navigation bar, and the overflow menu tool is displayed and the navigation entry is displayed in the menu.

We are sure that these new features of Ext JS 5 will make it easy to develop cross-device applications, and we want you to try them out. Maybe, it's going to be fun!

Phil guerrant
Phil is a Sencha software engineer who works on Ext JS. He has over ten years of experience as a developer and specializes in HTML5 and web development, UI, and agile Methodologie S.