PDA

View Full Version : TabPanel autoHeight dynamic content issue



jonasby
28 Mar 2011, 1:51 AM
I'm surprised I can't find any reproductions of this issue, so I guess there's an easy fix...
I have a TabPanel in a Window with tab content that dynamically adds/removes components from the panels.

If I set an activeTab then the doLayout call has no effect after adding a component. The second tab will grow in height, but not shrink on removing the component.

Both tabs use form layout (I tried lots of combinations of settings and had similar behaviour)

Here's an example with the workaround I'm using commented out:




<html>
<head>
<title>Tabs Example</title>
<link rel="stylesheet" type="text/css" href="../../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext/ext-all-debug.js"></script>
<script type="text/javascript">

function doHeightAdjustment(container, parent){

// method 1: unrendered tab 2 will increase in height but not decrease. rendered tab 1 will do nothing
// why must both the parent and the child container be laid out?
container.doLayout();
parent.doLayout();

// method 2: workaround forces height.
// why isnt doLayout doing this for us?
/*parent.doLayout();
var containerHeight = 0
container.items.each(function(item, index, length){
containerHeight += item.getHeight();
});
container.setHeight(containerHeight);*/
}

Ext.onReady(function () {
var cont1 = new Ext.Panel({
title: 'Tab 1',
layout: 'form',
items:[
{
xtype: 'checkbox',
id: 'checkbox1',
listeners:{
check: function(checkbox, value){
if(value == true){
cont1.add({
xtype: 'panel',
title: 'first panel',
height: 100,
id: 'panel1'
});
doHeightAdjustment(cont1, aTabPanel);
}else{
cont1.remove('panel1');
doHeightAdjustment(cont1, aTabPanel);
}
}
}
}
]
});
var cont2 = new Ext.Panel({
title: 'Tab 2',
layout: 'form',
items:[
{
xtype: 'checkbox',
id: 'checkbox2',
listeners:{
check: function(checkbox, value){
if(value == true){
cont2.add({
xtype: 'panel',
title: 'second panel',
height: 200,
id: 'panel2'
});
doHeightAdjustment(cont2, aTabPanel);
}else{
cont2.remove('panel2');
doHeightAdjustment(cont2, aTabPanel);
}
}
}
}
]
});

var aTabPanel = new Ext.TabPanel({
id: 'atabpanel',
deferredRender : true,
activeTab: 0,
items: [
cont1,cont2
]
});

var aWindow = new Ext.Window({
items: [
aTabPanel
],
title: 'Tabs window',
header: true,
constrain: true,
width: 300,
autoHeight: true,
resizable: false,
autoScroll: false,
constrainHeader: true,
collapsible: false
});
aWindow.show();

});
</script>
</head>

<body>
<div id="explain-text">
<h1>Tabs example</h1>
<br />
<div id="tabs"></div>
</div>
</body>
</html>


What's the deal, what have I done wrong? :)

* used extjs 3.2.1 and 3.1.1 with same result

kohyea
28 Mar 2011, 1:28 PM
Why not set autoScroll = true on TabPanel?

jonasby
31 Mar 2011, 3:25 AM
Basically because it would be inconsistent with other parts of the UI.

I'm more interested in why this doesn't work as I have a work around for now, is it a bug?

mcadirci
31 Mar 2011, 3:31 AM
You have added the autoHeight manually, not autoscroll.

jonasby
31 Mar 2011, 3:46 AM
taking autoHeight: true out of the tab panel has no effect on the behaviour I describe. I would like to avoid adding autoScroll: true

mcadirci
31 Mar 2011, 3:57 AM
The code you have writen has nothing with scroll, you just calculate the height of the container.

jonasby
31 Mar 2011, 4:00 AM
Correct. I'm confused, what was your point?

mcadirci
31 Mar 2011, 4:35 AM
If you are tring to resize the window after each panel add. You should do that after panels render function.

But this is really hard. Setting autoHeight should work.

Grolubao
31 Mar 2011, 4:52 AM
Why not just use Viewport?