Advanced Layout Design in Sencha Touch 2 - Part1

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 source code for the above layout.

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

    config: {
        height: '100%',
        itemId: 'layoutcontainer',
        width: '100%',
        layout: {
            type: 'vbox'
        },
        items: [{
            xtype: 'container',
            flex: 1,
            itemId: 'topcontainer',
            layout: {
                type: 'hbox'
            },
            items: [{
                xtype: 'panel',
                flex: 5,
                itemId: 'top_red_left',
                style: 'border-bottom:1px solid;background-color:red;',
                layout: {
                    type: 'fit'
                }
            }, {
                xtype: 'container',
                flex: 1,
                itemId: 'top_blue_right',
                style: 'border-bottom:1px solid;background-color:blue;'
            }]
        }, {
            xtype: 'container',
            flex: 2,
            itemId: 'middlebottomcontainer',
            layout: {
                type: 'fit'
            },
            items: [{
                xtype: 'container',
                docked: 'left',
                height: '100%',
                itemId: 'middle',
                width: '50%',
                items: [{
                    xtype: 'container',
                    height: '100%',
                    itemId: 'left_white_middle',
                    width: '100%'
                }, {
                    xtype: 'panel',
                    docked: 'bottom',
                    height: '50%',
                    itemId: 'right_green_middle',
                    style: 'background-color:blue;',
                    width: '100%',
                    layout: {
                        type: 'fit'
                    }
                }]
            }, {
                xtype: 'container',
                docked: 'top',
                height: '100%',
                itemId: 'bottom',
                width: '100%',
                layout: {
                    type: 'vbox'
                },
                items: [{
                    xtype: 'panel',
                    flex: 1,
                    itemId: 'left_blue_bottom',
                    style: 'border-bottom:1px solid;border-left:1px solid;background-color:green;',
                    layout: {
                        type: 'fit'
                    }
                }, {
                    xtype: 'panel',
                    flex: 1,
                    itemId: 'right_yellow_bottom',
                    style: 'border-left:1px solid;background-color:yellow;',
                    layout: {
                        type: 'fit'
                    }
                }]
            }]
        }]
    }

});

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

Hope, you enjoyed this Post.