ExtJS Auto Resize Tab Panel

问题

We have a viewport, and inside it we have a west region for navigation tree and a center region for content (grids, forms, etc.) which has a tab panel inside it.

We dynamically add content (tabs) to this tab panel, on click of any sub-menu item in navigation tree.

These tabs are not re-sized on window re-size.

The function to add tabs dynamically is:

function AddNewTab(title, url, closable) {
    var tabs = Ext.getCmp('tabs');
    tabs.add({
        xtype: 'panel',
        title: title,
        closable: closable,
        autoScroll: true,
        layout: 'fit',
        autoLoad: {
            url: url,
            scripts: true
        }
    });
    tabs.setActiveTab(tabs.items.length - 1);
}

Update: This is the normal state where every things is OK

But when we resize the window or collapse the right panel, tab panel won't re-size to fill the whole area.

回答1:

The layout of the center region should be 'fit' .

回答2:

This helped me out.

Ext.EventManager.onWindowResize(myEvilPanel.doLayout, myEvilPanel);

来源：https://stackoverflow.com/questions/12263035/extjs-auto-resize-tab-panel