ExtJS invert borderlayout behavior

Question

I have a border layout with all regions in use.

As you know the normal behavior of a borderlayout is that you define initial sizes for the north, south, east and west regions and the center gets the rest of the available space.

In my case I need to invert this. I want the center, the west and the north region to have a defined size and want to make all the other regions to get the rest of the available space. If I resize the browser window the outer regions must not flow over the center content.

Actually the center gets all the space when no sizes are defined for the outer regions and if i resize it only the center region shrinks and its content is violently deformed or overlayed by the other regions.

Does anyone know how to do this?

Answer 1

Hmm... I don't know if this is what you want. I've used vbox and hbox layouts instead to create something that might be closer to what you describe:

new Ext.Window({
    xtype: 'window',        
    layout: 'vbox',
    title: 'My Window',
    layoutConfig: {
        align : 'stretch',
        pack  : 'start'
    },
    items: [
    {
        xtype: 'panel',
        height: 100,                
        title: 'My Panel'
    }, {
        xtype: 'container',
        height: 150,
        layout: 'hbox',
        layoutConfig: {
            align : 'stretch',
            pack  : 'start'
        },
        items: [
            {
                xtype: 'panel',                        
                width: 300,
                title: 'My Panel'
            }, {
                xtype: 'panel',                    
                title: 'My Panel',
                flex: 1
            }
        ]
    }, {
        xtype: 'panel',                
        title: 'My Panel',
        flex: 1
    }]
});