ExtJS Auto Resize Tab Panel

Question

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. But when we resize the container, tab panel won't re-size to fill the whole area.

We want auto-resizing feature, like viewport auto resizing. I can add some images. — Mehdi Emrani
I see that the individual tabs get configured with layout: 'fit', does your tabpanel itself have layout: 'fit' also? — egerardus
Tabpanel layout defaults to card which implies fit. I agree that we need some images to see exactly what's going on. — Eric

Uri Uri · Accepted Answer · 2012-10-18T15:42:59

2

votes

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

ExtJS Auto Resize Tab Panel

2 Answers