Hands-On Sencha Touch 2

Chapter 5. The Layout System

In Sencha Touch there are two basic building blocks: components and containers. When you instantiate both with no configuration, they look the same. However, there is one important difference: containers can contain components (or other containers):

var container = Ext.create('Ext.Container', {
    items: [{
        xtype: 'component',
        html: 'Nested component'
    }, {
        xtype: 'container',
        items: [{
            xtype: 'component',
            html: 'Nested container with component'
        }]
    }]
});

Usually when containers hold other components, you want to think about how to position these multiple components. Maybe you want to position the components on top of each other, or maybe next to each other. In other words, you want to give the container a layout.

Under the hood, Sencha Touch uses the CSS3 flexbox layout. This is different from Ext JS 4, which uses JavaScript to dynamically calculate absolute CSS positions. The reason for the difference is because Ext JS needs to support old legacy browsers (IE6, ouch!). CSS3 flexbox layouts work only in modern browsers, and even here, there are multiple implementations required to support multiple browsers. To understand CSS3 flexbox layouts, take a look at “A Complete Guide to Flexbox”.

While implementing layouts in Sencha Touch (and in Ext JS), you do not need to worry about the underlying CSS techniques—the framework takes care of it. That said, some concepts, like flexing boxes in Sencha Touch (dynamic sizing), are similar to the CSS3 flexbox techniques. ...