Advanced Layout Design in Sencha Touch 2 - Part2

Today, we are going to see how to design a more complex layout using hbox, vbox layouts in Sencha Touch 2. Here is the snapshot of the layout design

Here is the sencha source code for the above layout design.

Ext.define('MyApp.view.LayoutContainer', {
    extend: 'Ext.Container',
    alias: 'widget.layoutcontainer',

    config: {
        itemId: 'layoutcontainer',
        layout: {
            type: 'hbox'
        },
        items: [{
            xtype: 'container',
            flex: 1,
            itemId: 'leftcontainer',
            layout: {
                type: 'fit'
            },
            items: [{
                xtype: 'container',
                height: '100%',
                itemId: 'top-left-red',
                style: 'background-color:red',
                width: '100%',
                layout: {
                    type: 'fit'
                }
            }, {
                xtype: 'panel',
                docked: 'bottom',
                height: '60%',
                itemId: 'bottom-left-green',
                style: 'background-color:green',
                width: '100%',
                layout: {
                    type: 'fit'
                }
            }]
        }, {
            xtype: 'container',
            flex: 1,
            itemId: 'righttcontainer',
            layout: {
                type: 'vbox'
            },
            items: [{
                xtype: 'panel',
                flex: 1,
                height: '50%',
                itemId: 'top-right-blue',
                style: 'border-bottom:1px solid;border-left:1px solid;background-color:blue;',
                width: '100%',
                layout: {
                    type: 'fit'
                }
            }, {
                xtype: 'panel',
                flex: 1,
                height: '50%',
                itemId: 'bottom-right-yellow',
                style: 'border-left:1px solid;background-color:yellow;',
                width: '100%',
                layout: {
                    type: 'fit'
                }
            }]
        }]
    }
});

Important Note: Each itemId configuration value denotes the corresponding display position with color for the above layout snapshot.

Hope, you enjoyed this Post.