PDA

View Full Version : Autoheight tabPanel when tab content changed



andreyb
21 Jan 2013, 1:02 PM
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
21 Jan 2013, 1:36 PM
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
21 Jan 2013, 1:48 PM
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
21 Jan 2013, 1:51 PM
Did my sample code not work for you?

andreyb
21 Jan 2013, 9:24 PM
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
22 Jan 2013, 12:22 AM
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.

andreyb
22 Jan 2013, 9:24 AM
As I know in ExtJS 3 there was a way to set autoHeight: true. And do not worry about triggering a layout. That means this feature have been lost in ExtJS4? That's sad:(