Sencha Inc. | HTML5 Apps

Blog

Exploring the Layout System in Ext JS 5 and Sencha Touch

April 24, 2014 | Ivan Jouikov

The layout system is one of the most powerful and unique parts of Sencha frameworks. Layouts handle the sizing and positioning of every Component in your application. Ext JS and Sencha Touch have many similarities between them, and Ext JS 5 now supports tablets as well. Let’s take a look at how the layout system works across the Sencha frameworks.

A Short History of Layouts

Bare HTML has always lacked a rigidly defined layout system. For many years, developing websites and applications that rendered consistently across browsers was very challenging because of a gap in CSS implementations — some industry veterans may recall having to write different “float” rules for different platforms to achieve something as simple as two-column layouts.

Frameworks including Ext JS and Sencha Touch were created specifically to help alleviate these cross-browser issues, ensuring that developers could spend more time adding features and less time nitpicking CSS differences. As many new HTML and CSS standards have matured and been adopted by browser vendors, the Sencha frameworks have also grown to support these standards while maintaining backwards compatibility for older legacy platforms.

Both Ext JS 5 and Sencha Touch provide abstracted cross-platform layout systems. This is accomplished in different ways behind the scenes, but the surface API is nearly identical for the shared layouts. The general idea is to eliminate the tedious work associated with implementing complex layouts by using a clean and concise JavaScript API.

Sencha applications are comprised of Components; a Container is a special type of Component that can contain other Components inside various types of “layouts”. By layering Containers and Components, we can build robust interfaces quickly and easily without having to worry about cross-browser quirks.

Containers and Components

The Similarities

While Ext JS and Sencha Touch target different platforms, they are both HTML5 frameworks, and many of the higher-level concepts remain the same. Because the paradigm for building web apps is shared between Ext JS and Sencha Touch, developers familiar with one framework can easily understand the other. Layouts are no exception.

As of Sencha Touch 2.3.1 and Ext JS 5.0.0 beta, the following layouts are supported by both frameworks:

Fit

Fit Layout

A single child occupies all of its parent’s space (Touch)(Ext JS)

Card

Card Layout

Similar to Fit, but with multiple children inside of a container, and only one child is visible at any given time; this is used by Tab Panels (Touch)(Ext JS)

HBox

HBox Layout

Children are positioned horizontally (Touch)(Ext JS)

VBox

VBox Layout

Children are positioned vertically (Touch)(Ext JS)

Float (Touch) / Absolute (Ext JS)

Float Layout

Children are positioned via top/left or x/y coordinates

The JavaScript API for utilizing these layouts is almost identical between Ext JS and Sencha Touch. For example:

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

As you can see, there are some differences in the Ext JS and Sencha Touch APIs, but the APIs related to layouts are essentially the same.

The Differences

The range of supported devices is notably different between Ext JS and Sencha Touch, and the differences in the layout systems can be attributed mainly to the UI/UX considerations specific to the targeted platforms.

Ext JS has historically leaned towards desktop computers, but now also supports tablets in Ext JS 5. Sencha Touch, on the other hand, provides an experience more suited towards mobile devices (phones, tablets, and other touch-screens).

As a result, the layout system in each framework does have marked differences. The most obvious difference is that some layout classes exist in one framework but not the other (see below). Other differences are harder to see because they go all the way down to how some of the shared layouts are implemented at the HTML level.

Ext JS-only Layouts

Border

Border Layout

A typical starting layout for most apps, containing north, south, east, west, and center regions; typically set on the Viewport (Ext JS)

  • Sencha Touch support of “docking” components lets you achieve the same (Touch)

Table

Table Layout

Children are positioned into rows and columns (Ext JS)

Column

Column Layout

Similar to HBox or Table without rows (Ext JS)

Anchor

Anchor Layout

Similar to VBox, but intended for scrollable content (Ext JS)

Form

Form Layout

For easy positioning of form fields (Ext JS)

  • Note: Ext JS 5 introduced some improvements to the Form layout.

Center

Center Layout

For centering a single child inside a parent (Ext JS)

Comparing HBox in Ext JS 5 vs. Sencha Touch

Box layouts are perhaps the most popular layouts in Ext JS and Sencha Touch because they are easy to use and are very powerful at positioning components horizontally or vertically. Box layouts automatically handle the horizontal or vertical sizing of Components, which is especially helpful when Components require a flexible height or width (via the “flex” config).

Let’s take a deep dive into the HBox layout to see how Ext JS and Sencha Touch approach the same concept in different ways.

Consider the following scenario, where we have two Components aligned horizontally inside a Container:

Containers and Components

The JavaScript code is virtually identical in both Ext JS 5 and Sencha Touch:

 
{ 
    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 also view the examples in Sencha Fiddle:

Now, let’s take a look behind the curtain and inspect how the frameworks render the physical DOM (using Google Chrome).

First, let’s look at Ext JS 5 markup:

Ext JS 5 Markup

The two DIVs above are the yellow and the green squares, respectively. Though not shown in the screenshot, both have position: absolute set. Notice that the second DIV has left: 100px and width: 493px set.

Looking at our earlier JavaScript code, we specifically assigned a width of 100px to our yellow Component, but we wanted the green Component “flex” to fill the rest of the parent’s width (in this case, 493px). Ext JS handled all of the calculations for us, so again we don’t have to worry about any cross-browser quirks. (We’ll revisit the idea of “calculated” layouts in a moment.)

Now, let’s take a look at Sencha Touch markup:

Touch Markup

Yet again, we have two DIVs: the yellow and the green squares, respectively. Notice that the second DIV has webkit-box-flex: 1 set. Though not shown in the screenshot, the parent DIV has display: -webkit-box; set.

If you are not familiar with the CSS3 flexbox, it is a pretty mature CSS3 spec implemented by all modern browsers. It lets you easily position and size children in a variety of ways that previously required far too much HTML and CSS trickery.

Thus, Sencha Touch offloads the “flex” calculations of our green Component to the browsers’ native layout engine (via CSS flexbox) rather than utilizing JavaScript to calculate and position the elements manually.

The immediate question that pops up is “Why isn’t Ext JS using CSS3 flexbox?

The answer is rather simple: platform support. Sencha Touch is targeting only mobile browsers, where all of the supported platforms implement the CSS3 flexbox specification. Ext JS 5 supports many legacy browsers, and we can see in the graphic below that many browsers still in use today don’t support CSS3 flexbox.

Platform Support

To compensate for the fact that the framework has to spend additional time calculating layouts, Ext JS allows us to suspend and resume layouts at any point during application runtime.

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

Using this optimization technique will usually improve performance for Ext JS applications because we can avoid making many modifications to the DOM tree at once. This is particularly important on mobile devices (e.g. tablets) as they typically have less powerful processors compared to desktop computers.

Conclusion

As you can see, the driving force behind each framework’s layout implementation is the web standards supported by the target platforms. Ext JS 5 has taken a huge step forward by expanding support for tablets, borrowing concepts that have been proven to work in Sencha Touch.

In spite of the under-the-hood differences between Ext JS and Sencha Touch, the two frameworks have consistent APIs for their layouts and now share many other core parts of their libraries (like data, charts, and more). See our What’s New in Ext JS 5 guide for more details.

Additional Reading

There are 5 responses. Add yours.

Chris Tarczon

6 months ago

The immediate question that pops up is “Why isn’t Ext JS using CSS3 flexbox?”

The answer to this question doesn’t really satisfy me. Isn’t the point of using an abstracted layout like Ext so that it can render different HTML depending on the browser’s capabilities?

Arthur Kay Sencha Employee

6 months ago

@Chris - That’s a fair response, but the reality is that consistent and reliable cross-platform support has many more details than this single example. Swapping out flexbox support for one browser (the point in question) would require changes in numerous other places, and the long-term complexity and maintainability of that has downstream implications (performance being one). It’s simply not as easy as throwing an if/else statement. Other examples exist too - but I don’t want to make this an essay on the internals of Ext JS.

In short, while Ext JS tries to make as many of these differences modular there are some cases in which we have made necessary trade-offs. I imagine this is why many other frameworks (e.g. AngularJS) have dropped support for IE8 completely.

If you’re still looking for more, please start a thread on the Sencha forums and I can ask our engineers to respond.

Chris Tarczon

6 months ago

Arthur, that’s understandable, and it’s not a big concern of mine anyway. Even if you could do it, the browsers that could most benefit from a performance boost wouldn’t support it anyway! I’ll look forward to Ext 6 with support for IE10+ wink

Blake

6 months ago

The immediate question that pops up is “Why isn’t Ext JS using CSS3 flexbox?”

Would love to see a hybrid approach here. Flexbox is great, but not so much for highly dynamic and performant interfaces on mobile. You end up ripping out the element and translate3ding to get the desired effect + performance. Infinite list is a good prototype: use calculated layout for major UI elements while letting the browser handle the gory details of the surfaces.

Tom

6 months ago

Hi, the Japanese translation of this blog article is here: http://www.xenophy.com/sencha-blog/10992
Link to the Japan Sencha User Group: http://www.meetup.com/Japan-Sencha-User-Group/

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

Commenting is not available in this channel entry.