TabPanel.setPlain(true) on a nested TabPanel

[vdhanda]

I'm nesting two TabPanels using GXT 1.1.1 and GWT 1.5.2. Calling TabPanel.setPlain(true) on the nested TabPanel does not have the desired effect -- the nested TabPanel's tab strip shows a background container image. Is there a workaround? Some sample code.

package com.epistemic.test.client;

import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.widget.*;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class GWTTest implements EntryPoint {

private static TabPanel createTabPanel(boolean internal) {
TabPanel tabs = new TabPanel();
tabs.setBodyBorder(!internal);
tabs.setBorders(false);
tabs.setBorderStyle(true);
tabs.setPlain(true);
tabs.setAutoSelect(true);
tabs.setTabScroll(true);
tabs.setTabPosition(internal ? TabPanel.TabPosition.BOTTOM : TabPanel.TabPosition.TOP);

return tabs;
}

@SuppressWarnings("unchecked")
private static TabItem createTabItem(String title, boolean closable, Widget w, boolean forceFit) {
TabItem ti = new TabItem(title);
if ( forceFit ) {
ti.setLayout(new FitLayout());
}
ti.setClosable(closable);
if ( w instanceof ScrollContainer ) {
ScrollContainer sc = (ScrollContainer)w;
sc.setScrollMode(Style.Scroll.AUTO);
}
ti.setBorders(false);
ti.add(w);
return ti;
}

public void onModuleLoad() {
TabPanel upper = createTabPanel(false);
TabPanel lower = createTabPanel(true);
TabItem upperTI = createTabItem("A tab", false, lower, true);
upper.add(upperTI);
TabItem lowerTI = createTabItem("How to get rid of this gray >>>", false, new Text("Hello, world"), true);
lower.add(lowerTI);

Viewport viewport = new Viewport();
viewport.setLayout(new FitLayout());
viewport.add(upper);

RootPanel.get().add(viewport);

}
}