ExtJS Auto Resize Tab Panel

0
votes

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 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.

2
javascriptextjsextjs4.1
What does not resized stands for? – s.webbandit
We want auto-resizing feature, like viewport auto resizing. I can add some images. – Mehdi Emrani
Way too vague. How does it work now? How should it? – Evan Trimboli
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

2 Answers

2
votes

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

1
votes

This helped me out.

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