ExtJS collapse panel doesn't work

Question

I have two panels. When I collapse the first one, the second does not fit the empty space. While if I collapse the second it works well.

this.firstpanel= new Ext.Panel( {
        region: config.propertyRegion, 
        id: config.editorpropertytable, 
        border: true, 
        borderBody: false, 
        autoHeight: false, 
        autoScroll:true,
        split: true,
        collapsible: true,
            height: 300, width: 600, minSize: minSize, maxSize: maxSize,
});

this.secondpanel= new Ext.Panel({
            region: config.previewRegion, 
            id: Ext.id(), 
            autoScroll:false, 
            border: true, 
            borderBody: false,
            collapsible: true,
            split: true
        });

I noticed that the arrow button for collapsing panels are different, but I don't why.

First panel collapsed

Second panel collapsed

Answer 1

In a BorderLayout, the collapsable space is always filled by the mandatory 'center' region.