Exploring the Layout System of Ext JS 5 and Sencha Touch

Original article: grouping the Layout System in Ext JS 5 and Sencha Touch

The layout system is the most powerful and distinctive part of the Sencha framework. Layout processes the size and position of each component in the application. There are many similarities between Ext JS and Sencha Touch, especially when Ext JS 5 starts to support tablets. Next, let's discuss how the layout system works with the cross-origin Sencha framework.

Brief layout history

The most basic HTML has always lacked a strictly defined layout system. For many years, cross-browser websites and applications have been very challenging due to the gap in CSS implementation. Some industry veterans may remember to write different float rules for different platforms to achieve a simple layout of two columns.

The Ext JS and Sencha Touch frameworks aim to solve these cross-browser problems and ensure that developers can spend more time adding features, instead of spending too much time dealing with CSS differences. As many new HTML and CSS standards have become increasingly mature through the efforts of browser vendors, the Sencha framework is constantly improving its support for these standards while maintaining backward compatibility, to support older systems.

Both Ext JS 5 and Sencha Touch provide an abstract cross-platform layout system. Although the implementation methods are different, the API interfaces basically use the same shared layout. Its basic goal is to eliminate tedious work related to complex la s through a clean and concise JavaScript API.

The Sencha application is composed of components. A container is a specific type of component. It can use different types of layout internally to include other components. Through layered containers and components, you can quickly build robust interfaces without worrying about cross-browser weird behavior.

Similarities

Although Ext JS and Sencha Touch are targeted at different platforms, they are all HTML5 frameworks and are consistent in many high-level concepts. Since Ext JS and Sencha Touch share the pattern of generating Web applications, it is easy for developers who attribute one of the frameworks to understand another one. The layout is no exception.

Both Sencha Touch 2.3.1 and Ext JS 5 beta support the following layout:

Adaptive (Fit)

Touch (Ext JS)

Card)

Similar to adaptive layout, the main difference is that the container contains multiple sub-components, and only one sub-component is displayed within a given period of time, which is usually used on the tab panel. (Touch) (Ext JS)

Horizontal box)

Child components are placed horizontally. (Touch) (Ext JS)

Vertical box)

Child widgets are placed vertically. (Touch) (Ext JS)

Float (Touch)/Absolute (Absolute) (Ext JS)

The child widget is located by the top/left or x/y coordinates.

The JavaScript APIs using these la s are basically the same between Ext JS and Sencha Touch, for example:

// Sencha Touch 2.3.1Ext.create('Ext.Container', {     layout  : 'hbox',    items  : [        //...    ]}); // Ext JS 5.0.0Ext.create('Ext.container.Container', {     layout  : 'hbox',    items  : [        //...    ]});

As you can see, there are still some differences between Ext JS and Sencha Touch APIs, but they are basically the same in terms of layout APIs.

Difference

Because Ext JS and Sencha Touch support different device scopes, the main difference between their la s lies in the differences between the UI/UX of specific target platforms.

Ext JS has always been inclined to desktop computers, but now Ext JS 5 has started to support tablets. Sencha Touch provides a better experience for mobile devices (mobile phones, tablets, and other Touch-screen devices.

Therefore, the layout system in each frame is significantly different. The most obvious difference is that some layout classes only exist in a framework, while others do not exist (see below ). Other differences are hard to tell because some shared la S have been implemented at the HTML layer for a long time.

It only exists in the layout Border (Border) of Ext JS)

For many applications, the layout of regions including north, south, east, and center in Viewport is a typical layout (Ext JS)

Sencha Touch can achieve similar functions through the docking component ).

Table)

Position child components through rows and columns (Ext JS)

Column)

Similar to horizontal box layout or single row table layout (Ext JS)

Anchor)

Similar to vertical box layout, but used for scrolling content (Ext JS)

Form)

Easy location of form fields (Ext JS)

Note: Some improvements have been introduced to the form layout of Ext JS 5.

Center)

Center a single child component in the parent component (Ext JS)

Compare the horizontal layout of Ext JS 5 and Sencha Touch

The box layout may be the most popular layout in Ext JS and Sencha Touch, because it is easy to use and has powerful functions to position components horizontally or vertically. The box layout automatically handles the size of the component in the horizontal or vertical direction, especially when the component requires a flexible height or width (implemented through the flex configuration item.

Next we will discuss the horizontal box layout in depth to understand how Ext JS and Sencha Touch implement the same idea in different ways.

Consider the following scenarios, You need to implement horizontal alignment of two components in a container:

In Ext JS 5 and Sencha Touch, Javascript code is basically the same:

{     xtype   : 'container',    layout  : 'hbox',    style   : 'background: gray;',    padding : 10,     defaults: {        xtype  : 'component',        height : 100    },     items: [{        style  : 'background: yellow;',        width  : 100    }, {        style  : 'background: green;',        flex   : 1    }]}

You can view this example on Sencha Fiddle:

• Ext JS 5: https://fiddle.sencha.com/#fiddle/4uv
• Sencha Touch: https://fiddle.sencha.com/#fiddle/4v0

Now, let's take a look at how the framework renders the DOM nodes of the Code (using Google Chrome ).

First, let's take a look at the Ext JS 5 Tag:

The above two divs are the yellow and green squares in the graph. Although it is not displayed on the screen, both divs have already set "position: absolute ". Note that "left: 100px" and "width: 493px" have been set for the second DIV ".

Check the previous Javascript code and specify that the width of the yellow component is 100 pixels, the green component uses the flex configuration item to fill the remaining width of the parent component (493 pixels in this example ). For us, Ext JS will process all the data, so we don't need to worry about the weird behavior of cross-browser. (Later, we will reconsider the calculated layout ).

Next, let's take a look at the Sencha Touch Tag:

Similarly, the DIV contains the yellow and green squares. Note that "webkit-box-flex: 1" is set for the second DIV ". Although it is not displayed on the screen, the parent node's div has already set "display:-webkit-box ;".

If you are not familiar with the flexbox of CSS3, you just need to know a very mature CSS3 standard implemented by modern browsers. It allows you to easily define the position and size of sub-nodes, without using a variety of HTML and CSS spoofing as before.

Therefore, Sencha Touch can use the local layout engine of the browser (using CSS flexbox) to calculate the width of the green component, rather than using Javascript to calculate or manually locate elements.

The question is, why does Ext JS not use flexbox of CSS3?

The answer is simple: platform support. The target platform of Sencha Touch is only a mobile browser, and all of these supported platforms have implemented the CSS3 flexbox standard. Ext JS 5 needs to support many earlier versions of browsers. As you can see, many browsers today do not support CSS3 flexbox.

In order to handle the problem that the framework requires additional events to calculate the layout, Ext JS allows us to pause or restore the layout at any point while the application is running.

Ext.suspendLayouts();// do stuff...Ext.resumeLayouts(true);

For Ext JS applications, the optimization technology can be used to improve performance because it can avoid modifying too many DOM trees at a time. This is especially important for mobile devices that do not have a processor as powerful as a desktop computer.

Summary

As you can see, the driving force behind the implementation of each framework layout is the Web standards supported by the target platform. Ext JS 5 has taken a big step here, and is starting to use the Sencha Touch concept to extend it to support tablets.

Despite the direct differences between Ext JS and Sencha Touch, for the layout of the two frameworks and components of other core libraries (such as data, charts, and others, their APIs are consistent. For more information, see What's New in Ext JS 5 guide.

Related reading:

• Ext JS 5 Layout Examples
• Ext JS 4 Layout Guide (still applicable to Ext JS 5)
• Sencha Touch Layout Guide
• A Complete Guide to CSS Flexbox

Author: Ivan Jouikov
Born and raised in Russia, Ivan Jouikov moved to the US with his family a little over a decade ago. passionate about HTML5 and Sencha products, Ivan contributed to Ext JS for policyears before joining Sencha as a Sr. solutions Engineer for the Professional Services team and moving to California.