ExtJS how to dock fill 4 panels

Question

I have the following Tab with 4 panels inside:

I have tried to fit and scale the 4 panels so they fill up the hole tab panel but without any success.

Here is my code:

Ext.define('softhuman.view.MainPanel', {
        extend: 'Ext.tab.Panel',
        xtype: 'mainpanel',
        items: [{
            title: 'Dashboard',
            glyph: Glyphs.DASHBOARD,
            padding: '5',
            layout: {
                type: 'table',
                columns: 4
            },
            defaults: {
                frame: true,
                style: 'margin: 0 10px 10px 0',
                height: 260,
                flex: 1
            },
            items: [{
                // title: 'Item 1',
                colspan: 1,
                width: 500
            }, {
                // title: 'Item 2',
                colspan: 3,
                width: 500
            }, {
                // title: 'Item 3',
                colspan: 2,
                width: 500,
                items: [{
                    xtype: 'tabpanel',
                    activeTab: 0,
                    //width: '100%',
                    items: [{
                        xtype: 'panel',
                        title: 'Item 1',
                        items: [{
                            xtype: 'gridpanel',
                            height: 230,
                            border: 1,
                            enableColumnHide: false,
                            enableColumnMove: false,
                            columns: [

                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'string',
                                    text: 'Column 1'
                                }, {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'string',
                                    text: 'Column 2'
                                }, {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'string',
                                    text: 'Column 3'
                                }
                            ]
                        }]
                    }, {
                        xtype: 'panel',
                        title: 'Item 2'
                    }, {
                        xtype: 'panel',
                        title: 'Item 3'
                    }, {
                        xtype: 'panel',
                        title: 'Item 4 '
                    }, {
                        xtype: 'panel',
                        title: 'Item 5'
                    }]

                }]
            }, {
                // title: 'Item 4',
                colspan: 2,
                width: 500

            }]
        }]

Any clue?

Answer 1

Use box layouts:

Ext.require('*');


Ext.onReady(function() {

    new Ext.tab.Panel({
        renderTo: document.body,
        width: 600,
        height: 600,
        items: {
            title: 'Foo',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                xtype: 'container',
                flex: 1,
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [{
                    flex: 1,
                    title: 'P1'
                }, {
                    flex: 1,
                    title: 'P2'
                }]
            }, {
                xtype: 'container',
                flex: 1,
                layout: {
                    type: 'hbox',
                    align: 'stretch'
                },
                items: [{
                    flex: 1,
                    title: 'P3'
                }, {
                    flex: 1,
                    title: 'P4'
                }]
            }]
        }
    });

});