PDA

View Full Version : tabpanel and vbox



Nitro
30 Nov 2010, 4:13 AM
Hello,

I want to show a TabPanel at the top of my viewport. Below it should be another panel, the main area.

The TabPanel should take whatever height is needed to show all of it's content, the main panel should then take up all of the remaining height.

The main area should be something like a desktop later where I can show a background, constrain windows in etc.

My current code looks like



Ext.onReady(function(){

toolbar = new Ext.TabPanel({
flex : undefined, // try 1 here
});

main = new Ext.Panel({
flex : 1,
layout : 'fit',
items : { html : 'Main panel' }
});

viewport = new Ext.Viewport({
monitorResize : true,
layout : 'vbox',
layoutConfig : { align : 'stretch' },
items : [ toolbar, main ],
renderTo : Ext.getBody()
});

// try moving these between the creation of toolbar and main
toolbar.add({
title : 'Some panel',
tbar : [{ text : 'Test item', scale : 'large' }]
});
toolbar.setActiveTab(0);
toolbar.doLayout();

// this should show something like 70, not 28
alert(toolbar.getHeight());

});


Unfortunately this does not work. The tabPanel does not take all the height it needs, the toolbar is not visible. When I move the code that creates the tab dynamically as shown in the code comment everything works as expected.

Why is this failing and how can I fix it? I've found out that the tbar has the proper height, but somehow the tabpanel does not grow to encompass it. When I set the 'fit' layout on it, everything fails (I guess because tabPanel has to use the card layout).

-Matthias

Nitro
30 Nov 2010, 4:41 AM
Hello,

I want to show a TabPanel at the top of my viewport. Below it should be another panel, the main area.

The TabPanel should take whatever height is needed to show all of it's content, the main panel should then take up all of the remaining height.

The main area should be something like a desktop later where I can show a background, constrain windows in etc.

My current code looks like



Ext.onReady(function(){

toolbar = new Ext.TabPanel({
flex : undefined, // try 1 here
});

main = new Ext.Panel({
flex : 1,
layout : 'fit',
items : { html : 'Main panel' }
});

viewport = new Ext.Viewport({
monitorResize : true,
layout : 'vbox',
layoutConfig : { align : 'stretch' },
items : [ toolbar, main ],
renderTo : Ext.getBody()
});

// try moving these between the creation of toolbar and main
toolbar.add({
title : 'Some panel',
tbar : [{ text : 'Test item', scale : 'large' }]
});
toolbar.setActiveTab(0);
toolbar.doLayout();

// this should show something like 70, not 28
alert(toolbar.getHeight());

});


Unfortunately this does not work. The tabPanel does not take all the height it needs, the toolbar is not visible. When I move the code that creates the tab dynamically as shown in the code comment everything works as expected.

Why is this failing and how can I fix it? I've found out that the tbar has the proper height, but somehow the tabpanel does not grow to encompass it. When I set the 'fit' layout on it, everything fails (I guess because tabPanel has to use the card layout).

-Matthias

Animal
30 Nov 2010, 4:57 AM
As much height as it needs? An empty TabPanel does not need much height.

But you need to decide your layout allocation. Height can only be known after layout. Which is too late for rendering. The vbox layout is rendering the TabPanel (not the TabPanel's children, they will be rendered further down the chain), and so it has no information about what height it might or might not need.

If you want to later, adapt the height of the TabPanel, add a render listener to that Panel that you add, measure its scrollHeight, and then change the TabPanel's height accordinglu.

Nitro
30 Nov 2010, 1:36 PM
Thanks, Animal. I feared that this was a bit of a chicken and egg problem, but could not find a good way to solve it. I thought there was maybe some ExtJS method to get the size of the tabPanel as if it wasn't in the vbox.

My final solution is to use this code:



toolbar.setHeight( newPanel.getHeight() + toolbar.header.getHeight() );


when adding a new item to the toolbar. This seems to produce the desired result.