Autoheight tabPanel when tab content changed

[andreyb]

Hi, all.
I know this question has been asked for a dozen of times, but I can't find correct answer for my case.
All I want to have is ExtJS tabPanel with 1 tab, content of which can be changed dinamycaly. For example 3 line text may be replaced with 30 lines text.

My code is following http://jsfiddle.net/andreyb89/PYYaq/1/

I have seen answers that I must put panel in some other container with layout: 'fit', so I tried to put panel in Ext.container.Container with layout: 'fit' but there is no result. If I change inner text tabs do not change its height (because tab div has style='height:55px'...)

My sample with Container http://jsfiddle.net/andreyb89/CMtFB/2/

Unfortunatly I can't know when my content div will change it's size, so I can't call .doLayout() every time content has been changed.

Any suggestions? What am I doing wrong?

[slemmon]

function addText() {
    Ext.ComponentQuery.query('tabpanel')[0].items.getAt(0).update('test test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test test ');
}
Ext.onReady(function() {
    var tabs = Ext.createWidget('tabpanel', {
        renderTo: 'tabs1',
        width: 450,
        activeTab: 0,
        defaults :{
            bodyPadding: 10
        },
        items: [{
            contentEl:'script', 
            title: 'Short Text',
            closable: true
        }]
    });
})

[andreyb]

I can't control the way content is changed... Content is changing after user actions, and I don't know when it will happen and what will be changed

[slemmon]

Did my sample code not work for you?

[andreyb]

Did my sample code not work for you?

No, because It is only in example content beeing changed during button onclick.
In real application I have a page, logic of which I can't change, and I have to include this page in tab. Included page can change its height dinamically and I can't control code which change it. So I can't call ExtJS .update method.

What I really need - is to force ExtJS do not set fixed height on tab div, that div must have 'height: auto' style or something similar.

[evant]

You need to trigger a layout on the outer component so it knows to measure the content:

function addText() {
    document.getElementById('script').innerHTML='test test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test test ';
    window.foo.updateLayout();
}

Ext.onReady(function() {
    window.foo = Ext.create('Ext.container.Container', {
        layout: 'fit',
        renderTo: 'tabs1',
        items: [{
            xtype: 'tabpanel',
            width: 450,
            activeTab: 0,
            defaults :{
                bodyPadding: 10
            },
            items: [{
                contentEl:'script', 
                title: 'Short Text',
                closable: true
            }]
		}]
    });
});

If you're just setting the HTML the component knows nothing about it. Depending on the browsers you're supporting, you may be able to listen to DOM mutation events.