Maintain percentage based border layout after resize using splitter

[knightweb]

The layout listed below assigns a percentage width/height of the overall container to the west and south components.
This works well when resizing the browser, in that those percentages are maintained.

If however, I use the splitter to resize the west or south panels, those panels suddenly become fixed to that exact size. Rezising the browser has no affect on those panels.

Is there any current api setting I can use to force it to maintain the percentage approach - in that after resize ext would recalculate what percentage of the screen they now occupy and set the width/height as a new percentage.

Ext.onReady(function() {
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [
            {
                region: 'north',
                margins: 5,
                height: 50,
                xtype: 'container',
                html: 'North'
},
            {
                title: 'West',
                region: 'west',
                margins: '0 5 0 5',
                width:'50%',
                collapsible: true,
                split: true,
                titleCollapse: true
},
            {
                title: 'Center',
                region: 'center'
},
            {
                title: 'East',
                region: 'east',
                margins: '0 5 0 5',
                width: 100,
                collapsible: true,
                collapsed: true
},
            {
                title: 'South',
                region: 'south',
                margins: '0 5 5 5',
                height: '40%',
                split: true,
                html:'testing 123'
}
        ]
    });
});

[knightweb]

Managed to find a solution using "hbox" and "vbox" layout, as both support the "splitter" component, it maintains flex even after sizing.

Here's what I was trying to achieve, incase it benefits any one else later...

Ext.define('spiral.centerpanel', {
    extend: 'Ext.Container',
    layout: {
        type: 'hbox',
        align: 'stretch'
    },
    alias: 'widget.centerpanel',
    items: [{
            title: 'left',
            flex: .5,
            resizable: false,
            style: {
                borderRight: '2px solid #157FCC'
            },
            collapsible: true,
            collapseDirection: 'left',
            xtype: 'panel',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            html: 'testing left'
        },
        {
            xtype: 'splitter'
        },
        {
            title: 'center',
            flex: 1,
            autoScroll: true,
            html: "testing center"
        },
        {
            xtype: 'splitter'
        },
        {
            title: 'right',
            flex: .5,
            autoScroll: true,
            resizable: false,
            style: {
                borderLeft: '2px solid #157FCC'
            },
            collapsible: true,
            collapseDirection: 'right',
            xtype: 'panel',
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            html: 'testing right'
        }
    ]
});
Ext.onReady(function() {
    new Ext.container.Viewport( {
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [{
                style: {
                    borderTop: '2px solid #157FCC',
                    borderBottom: '2px solid #157FCC'
                },
                html:'top',
                height: 60
            },
            {
                xtype: 'centerpanel',
                flex: 1
            },{
                style: {
                    borderTop: '2px solid #157FCC',
                    borderBottom: '2px solid #157FCC'
                },
                html:'bottom',
                height: 30
            }]
    });
});