"Translation" explore the layout system of Ext JS 5 and Sencha Touch

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

The layout system is one of the most powerful and distinctive parts of the Sencha framework.

The layout handles the size and position of each component in the application. There are a lot of similarities between Ext JS and Sencha touch directly. Especially now the EXT JS 5 starts to support the tablet more so. Let's consider how the layout system works across domain Sencha frameworks.

A brief history of layout

The main HTML has always lacked a strictly defined layout system.

For many years, because of the CSS implementation of the gap. Developing cross-browser sites and applications has always been a challenge.

Some industry veterans are expected to remember the need to write different float rules for different platforms to achieve a simple two-column layout.

Ext JS and Sencha Touch Framework for the purpose. is to solve these cross-browser problems, to ensure that developers can spend a lot of other time on the join function, rather than spend too much time on the differences in processing CSS. Because many new HTML and CSS standards have become more and more mature through the efforts of browser vendors. The Sencha framework is also constantly improving support for these standards, while maintaining backward compatibility at the same time in order to support older older systems.

Whether it's Ext JS 5 or Sencha Touch. Both provide an abstract cross-platform layout system. Although the implementation is different in the way. But on the API interface. Basically, the same shared layout is used. Its basic goal is to eliminate tedious work related to the implementation of complex layouts through a clean and concise JavaScript API.

Sencha applications are made up of components. A container is a specific type of component that can internally use different types of layouts to include other components. By layering containers and components, you can build robust interfaces at high speeds without worrying about cross-browser quirks.

Similarities

Although Ext JS and Sencha touch are for different platforms, they are HTML5 frameworks and are consistent in many high-level concepts. Since Ext JS and Sencha touch are shared in the pattern of generating web applications. Thus it is very easy for the developer of one of the frameworks to get to know the other one.

The layout is no exception.

In Sencha Touch 2.3.1 and ext JS 5 beta, the following layouts are supported:

Adaptive (FIT)

A single child component fills the parent component's Space (Touch) (Ext JS)

Cards (Card)

Similar self-adapting layouts. The main difference is that multiple subcomponents are included within the container, and only one subassembly is displayed for a given time, which is typically used on the label page board. (Touch) (Ext JS)

Horizontal box (HBox)

Sub-components are placed horizontally. (Touch) (Ext JS)

Vertical box (VBox)

The subassembly is placed vertically. (Touch) (Ext JS)

Floating (float) (Touch)/Absolute (Absolute) (Ext JS)

Subassemblies are positioned by top/left or x/y coordinates.

The JavaScript API that uses these layouts between Ext JS and Sencha touch is basically the same. Like what:

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 have shown. The API for Ext JS and Sencha touch is still somewhat different, just basically the same on the API about the layout.

Difference

Because the range of devices supported by Ext JS and Sencha Touch is different, the difference between their layouts is primarily the difference between the ui/ux of a particular target platform.

Ext JS has always preferred the desktop computer, but now the Ext JS 5 has started to support the Tablet PC. and Sencha Touch. Provides a more appropriate experience for mobile devices (phones, tablets, and other touch-screen devices).

As a result, there are some significant differences in the layout system in each frame. The most obvious difference is that some layout classes exist only in a framework. And in the other one is not (see below). Other differences are very difficult to distinguish because, historically, some shared layouts have been implemented in the HTML layer.

Only the layout border (Border) that exists in Ext JS

For many applications. The layout of the viewport including North, south, east, and center areas is a more typical layout. (Ext JS)

Sencha Touch enables similar functionality (touch) by docking components.

Form (table)

Sub-components are positioned by row and column (Ext JS)

Columns (column)

Table layout similar to horizontal box layout or single line (Ext JS)

anchoring(Anchor)

Similar vertical box layout, but for scrollable content (Ext JS)

Form (form)

Easy positioning of form fields (Ext JS)

Note: For the form layout of Ext JS 5, some improvements have been introduced.

Center (center)

Centering a single subassembly within the parent component (EXT JS)

Control the horizontal layout of the Ext JS 5 and Sencha Touch

The box layout may be the most popular layout in Ext JS and Sencha touch, because they are easy to use, and the ability to position components horizontally or vertically is quite powerful. The box layout proactively handles the dimensions of the component horizontally or vertically, especially if the component requires a flexible height or width (implemented by Flex configuration items). particularly practical.

Take a closer look at the horizontal box layout to see how Ext JS and Sencha touch Implement the same ideas in different ways.

Consider the following scenario. Two components need to be horizontally aligned within a container:

In ext JS 5 and Sencha touch, JavaScript's code is basically the same:

{     xtype   : ' container ',    layout  : ' Hbox ',    style   : ' Background:gray; ',    padding:10,     Defaults: {        xtype  : ' Component ',        height:100    },     items: [{        style  : ' Background: Yellow; ',        width  : $    ', {        style  : ' Background:green; ',        flex   : 1    }]}

The demo sample can be viewed on the Sencha fiddle:

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

Now. To look at how the framework renders the DOM nodes of the code (using Google Chrome).

First, check out the tags for ext JS 5:

The above two div is the yellow and green squares in the figure. Although not shown on the screen, in fact two Div has been set "Position:absolute". Be careful. The second div already has "left:100px" and "width:493px" set.

Take a look at the previous JavaScript code. The yellow component is specified with a width of 100 pixels. The green component uses the Flex configuration item to fill the remaining width of the parent component (in this demo sample is 493 pixels).

For us, Ext JS will handle all the data. That way, we don't have to worry about weird cross-browser behavior. (at a later time, we will consider the calculation (calculated) layout again).

Following. Let's take a look at the Sencha Touch tag:

Again, this includes the two squares of the yellow and green div. It's important to note that. The second div is set to "Webkit-box-flex:1".

Although the screen does not appear, the parent node's Div has been set to "display:-webkit-box; ”。

Assuming that you are not familiar with CSS3 's flexbox, you know that this is a very mature CSS3 standard for modern browser implementations. It allows you to define the location and size of the child nodes very easily. You don't have to use a lot of different kinds of HTML and CSS spoofing like you did before.

So. Sencha Touch can use the browser's local layout engine (via CSS Flexbox) to calculate the width of the green component without the need to use JavaScript to calculate or manually position elements.

Now the problem is. Why does Ext JS not use CSS3 's flexbox?

The answer is very easy: platform support. Sencha Touch's target platform is simply a mobile browser, and these supported platforms have already implemented the CSS3 Flexbox standard.

EXT JS 5 need to support a lot of the old version of the browser, and from can see, today there are many browsers do not support CSS3 Flexbox.

In order to deal with the framework it is necessary to spend additional events to calculate the layout problem. Ext JS agrees to pause or resume the layout at any point when the application executes.

Ext.suspendlayouts ();//do stuff ... Ext.resumelayouts (TRUE);

For the Ext JS application. Because you can avoid altering too many dom trees at one time. Thus. Optimization techniques can be used to improve performance. This is especially important for mobile devices with processors that are not as powerful as desktop computers.

Summary

As you can see, the driving force behind the layout implementation of each framework is the Web standards supported by the target platform.

EXT JS 5 takes a big step forward and is beginning to borrow the concept of Sencha touch to extend it to a support tablet.

Although the current Ext JS and Sencha Touch directly there are differences. But for the layout of the two frameworks, as well as the parts of other core libraries (such as data, charts, and others), their APIs are consistent. For more information, refer to "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

Ivan Jouikov
Born and raised in Russia, Ivan Jouikov moved to the US with he family a little over a decade ago. Passionate about HTML5 and Sencha products, Ivan contributed to Ext JS for many years before joining Sencha as a Sr. Solut Ions Engineer for the Professional Services team and moving to California.

Translation explores the layout system for Ext JS 5 and Sencha touch