BorderLayout problem: Nested tabs take on wrong style

[exo]

Hi there,

First of all, I'm new with this framework (rather: with JS frameworks in general) so please bear with me. From what I've seen Ext is really nice and I was hoping you guys could help me out with a problem I've encountered. I don't know if this is a bug or an intended feature and I'm doing something wrong, I'll try to explain myself as clear as possible.

So, I have a BorderLayout. It's center region can house 1 or more dynamically generated ContentPanels. These can be closed and opened by the user. The tabs of these panels are positioned at the bottom. So far so good.

A typical panel in this centerregion contains a nested BorderLayout. This BorderLayout is created by passing a reference to the panels element to the BorderLayout constructors first parameter. The inner BorderLayout also has a center region which also features some tabs, however these tabs are positioned at the top of the panel and cannot be closed.

The problem:
The style of the tabs on the inner BorderLayout acts as if it's tabPosition is set to bottom. The positioning itself is in order but apperently they inherit the css style from the outer BorderLayout?

http://img.photobucket.com/albums/v125/exodepexo/yui.gif

I hope I'm making myself somewhat clear. If you want I'll post some code or screenshots, thanks a lot in advance :).

[tryanDLS]

I thought there was an issue with CSS for nested tabs at one point, but it was fixed. Are you using the latest alpha rev?

[exo]

I'm using Ext - JS Library 1.0 Alpha 3 - Rev 4, am I doing something wrong? When I'm testing my inner BorderLayout on a seperate page, the tabs will show correctly.

[Animal]

Take a look at the styles being applied with Firebug. See what's different than on a working tab.

[exo]

Right. Good suggestion, thanks.

The div of the outer (with the tabs at the bottom) ContentPanel has it's className property set to "x-layout-panel-body x-tabs-bottom". Inner div (that has the tabs at the top) has "x-layout-panel-body x-tabs-top". However, the tab elements in the inner BorderLayout seem to inherit stuff from the outer one.

For example this part of an INNER tab


<a id="ext-gen94" class="x-tabs-right" href="#">
Firebug shows this in the CSS tab:

.x-tabs-bottom .x-tabs-strip .on .x-tabs-right {ext-all.css (line 338)
background:transparent url(../images/default/tabs/tab-btm-right-bg.gif) no-repeat scroll left bottom;
}

When I look at the CSS when the inner BorderLayout is not embedded by the outer one, I get this:

.x-tabs-strip .on .x-tabs-left {ext-all.css (line 281)
background:background:transparent url(../images/default/tabs/tab-sprite.gif) no-repeat scroll 0pt -100px;;
}




Now, I could probably be done with this and try to use a regular TabPanel but I feel this is a bug that can maybe be fixed?