Extjs panel resize issue

My page uses border layout with center and east regions, center region has three panels as children, two of the panel are collapsible. When I collapse east region, center regions child panels are not resized.

Ext.require(['*']);
Ext.onReady(function() {


Ext.create('Ext.Vie开发者_运维百科wport', {
    layout: {
        type: 'border',
        padding: 5
    },
    defaults: {
        split: true
    },
    items: [{
        region: 'center',
        border: false,
        items: [{
            html: '<h3>some text...</h3>',
        },{
            height: 100,
            split: false,
            collapsible: true,
            style : {
                marginTop:'20px'
            },
            title: 'panel 1',
            html: 'center panel 1'
        },{
            height: 100,
            split: false,
            collapsible: true,
            style : {
                marginTop:'20px'
            },
            title: 'panel 2',
            html: 'center panel 2'
        }]
    },{
        region: 'east',
        collapsible: true,
        split: true,
        width: 200,
        title: 'East'
    }]
});

What is needed to make the panels resizable as per the center region? Can anyone assist me?

Your code actually almost works for me. But I suggest you specify a layout for your center container. The default "auto" layout isn't particularly smart. I suggest you use "anchor":

items: [{
    region: 'center',
    layout: 'anchor',