Two horizontal collapsible panels

I have two panels inside a container (layout: fit) and both panels need to be collapsible horizontal. To realize this I need to have three panels (2 panels with region: west and one panel region center) like this:

defaults: {
    collapsible: true,
    split: true,
    margin: 1,
    padding: 1,
    height: '100%'
},
items: [{
    title: 'west 1',
    floatable: false,
    flex: 100,
    region: 'west'
}, {
    hidden: true,
    collapsed: true,
    region: 'center',
    flex: 1,
    split: false
}, {
    title: 'west 2',
    floatable: false,
    flex: 100,
    floatable: false,
    region: 'west',
    split: false
}]

It works but the extra panel is very uggly!. Does anyone have a better sollution?

regards, Arno

Use it like below code snippet:

Ext.create('Ext.panel.Panel', {
    width: 500,
    height: 300,
    title: 'Container',
    layout: 'hbox',
    defaults: {
        collapsible: true,
        collapseDirection: 'left',
        margin: 1,
        height: '100%'
    },
    items: [{
        title: 'west 1',
        width: 100
    }, {
        title: 'west 2',
        floatable: false,
        flex: 1,
        split: false
    }],
    renderTo: Ext.getBody()
});

Working Example

Hope this will help/guide you.