Advanced Layout Design in Sencha Touch 2 - Part3

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.MyContainer', {
    extend: 'Ext.Container',

    config: {
        itemId: 'maincontainer',

        layout: {
            type: 'hbox'
        },

        items: [{

            xtype: 'panel',
            flex: 1,
            itemId: 'left-red-panel',
            style: 'background-color:red;'

            }, {

            xtype: 'container',
            flex: 3,
            itemId: 'middle-container',
            layout: {
                type: 'vbox'
            },

            items: [{
                xtype: 'panel',
                flex: 1,
                itemId: 'top-right-panel',
                layout: {
                    type: 'hbox'
                },

                items: [{

                    xtype: 'panel',
                    flex: 1,
                    itemId: 'left-blue-panel',
                    style: 'background-color:blue;'

                }, {

                    xtype: 'panel',
                    flex: 1,
                    itemId: 'right-green-panel',
                    style: 'background-color:green;'

                }]

               }, {

                xtype: 'panel',
                flex: 1,
                itemId: 'bottom-right-panel',
                layout: {
                    type: 'hbox'
                },

                items: [{

                    xtype: 'panel',
                    flex: 1,
                    itemId: 'left-yellow-panel',
                    style: 'background-color:yellow;'

                }, {

                    xtype: 'panel',
                    flex: 1,
                    itemId: 'right-black-panel',
                    style: 'background-color:black;'

                }]
            }]
        }]
    }
});

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

Hope, you enjoyed this Post.