PDA

View Full Version : TabPanel tab body height



devnull
22 Oct 2007, 1:09 PM
I've been struggling with this one for awhile. In the old version of the app (for Ext 1.1) I used a complicated arrangement of resize handlers to adjust the height and width of just about everything, which worked ok but because of differences in browser box model it just did always lookg right cross-browser.
The app ui is pretty simple; i have a border layout with a north region (for logo, header, etc) and a center region which contains a tabpanel. The problem is the body for each tab in the tabpanel is only as tall as it's content renders out to. I want them to expand in height to fill the center region regardless of what content is in them, with scrolling as nevessary (autoScroll is set to true on them already).
What am I missing here?


var mainPanel; //need a reference to this as module tabs will eventually be added dynamically later
var simple = new Ext.Viewport(
{
layout:"border",
items:[{
region:"center",border:false,
items:
mainPanel = new Ext.TabPanel({
xtype:"tabpanel",
activeTab:0,
items:[{
xtype:"panel",
autoScroll:true,
title:"Module 1"
},{
xtype:"panel",
autoScroll:true,
title:"Module 2"
}]
})
},{
region:"north",
height:45,
layout:"fit",
items:[{
layout:"border",
border:false,
items:[{
// header/title
region:"center",
contentEl:"top-center",
border:false
},{
// logo
region:"west",
width:140,
contentEl:'top-west',
border:false
},{
// username/themes
region:"east",
width:140,
contentEl:'top-east',
border:false
}]
}]
}]
}
);

chitownd
22 Oct 2007, 1:22 PM
this may be of help. I ran across this problem and got around it by setting height and width in the tab panel config:

http://extjs.com/forum/showthread.php?t=15667

devnull
22 Oct 2007, 1:34 PM
while interesting, thats not a fix either. in fact, it makes things worse. by setting the height to greater than the available area, the tab body is off the bottom of the screen. any content in the body that also goes off the screen will of course not be visible, and there are no scroll bars.
In fact now that i look at it with a bunch of content, the default behavior is to render off the bottom of the browser with no scroll bars as well!
it seems like autoheight should be the fix, but it does nothing.

chitownd
22 Oct 2007, 2:12 PM
It works for me. Are you sure you've put the "autoscroll:true" in the right spot, depending on the behavior you're looking for, the autoscroll config would go in your tabPanel main config, not the items that it contains.

devnull
22 Oct 2007, 2:17 PM
yes, I adjusted it like this:


mainPanel = new Ext.TabPanel({
xtype:"tabpanel",
activeTab:0,
autoScroll:true,
items:[{
xtype:"panel",
title:"Module 1"
},{
xtype:"panel",
title:"Module 2"
}]
})

chitownd
22 Oct 2007, 2:19 PM
so you adjusted it and it works, or it still doesn't work?

devnull
22 Oct 2007, 2:39 PM
it does not work correctly still (same behavior).

santosh.rajan
22 Oct 2007, 9:39 PM
You have a an extra level of items on center panel. In Ext 2.0 the center layout itself can be a TabPanel or any other container. Also you need to layout: fit each item in the tabpanel. Here is the new code.


layout:"border",
items:[ mainPanel = new Ext.TabPanel({
region: 'center',
border: 'false',
activeTab:0,
items:[{
xtype:"panel",
layout: 'fit',
autoScroll:true,
title:"Module 1"
},{
xtype:"panel",
layout: 'fit',
autoScroll:true,
title:"Module 2"
}] })
}),{
region:"north",

devnull
23 Oct 2007, 8:12 AM
Thank you, I think I am finally starting to understand this :)
I also realized I can just give the center region an id and get it with Ext.getCmp later instead of creating a tabPanel inline, makes the code much cleaner. And I have to add autoScroll: true to get content to scroll since it doesnt by default (which is good, i am going to need both setups for my modules).
Ext 2.0 definantly has a learning curve, but its worth it. Figuring out how the layouts work seems to offer the best payout ;)