ExtJS, how to nest the red and green container (Layer 2) inside of Layer 1 body? I want the red and green containers inside Layer 1

Question

enter image description here How I want it to look ^

Current Code:

Ext.create('Ext.Container', { width: '100%', layout: 'vbox', renderTo: document.body, defaults: { xtype: 'container', width: '50%', layout: 'vbox', border: 0 }, items: [{ bodyStyle: {}, defaults: { style: {}, }, items: [{}] }, { items: [{ xtype: 'container', style: {}, }, { xtype: 'container', style: { 'background': 'grey', 'color': 'white', 'font-size': '15px', }, width: '100%', height: 50, html: 'Layer 1 Header' }, { xtype: 'container', style: { 'background': 'lightgrey', 'color': 'black', 'font-size': '15px', }, width: '100%', height: 200, html: 'Layer 1 Body' }, ] }, { xtype: 'container', style: { 'background': 'darkred', 'color': 'white', 'font-size': '15px', }, width: '25%', height: 200, html: 'Layer 2 Left' }, { xtype: 'container', style: { 'background' : 'darkgreen', 'color' : 'white', 'font-size': '15px', 'pack': 'center', }, width: '25%', height: 200, html: 'Layer 2 Right' } ] });

Answer 1

You can combine vbox / hbox layout with align set to stretch in order to achieve this layout. Check this code, tested in a Fiddle (ExtJS 7.3.0 - Material, classic toolkit):

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.Container', {
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            renderTo: document.body,
            items: [{
                    xtype: 'container',
                    style: {
                        'background': 'grey',
                        'color': 'white',
                        'font-size': '15px',
                    },
                    height: 50,
                    html: 'Layer 1 Header'
                }, {
                    xtype: 'container',
                    layout: {
                        type: 'hbox',
                        align: 'stretch'
                    },
                    items: [, {
                        xtype: 'container',
                        flex: 1,
                        height: 200,
                        style: {
                            'background': 'darkred',
                            'color': 'white',
                            'font-size': '15px',
                        },
                        html: 'Layer 2 Left'
                    }, {
                        xtype: 'container',
                        flex: 1,
                        height: 200,
                        style: {
                            'background': 'darkgreen',
                            'color': 'white',
                            'font-size': '15px'
                        },
                        html: 'Layer 2 Right'
                    }]
                }

            ]

        });
    }
});