[CLOSED] [1.2.3]Scrollbar issues for TabItems

[smfed]

Well after sicking some help at this thread http://extjs.com/forum/showthread.php?t=62691. I continue my studings of the problem and found out that this may be a bug:

Description: When I add a TabPanel to the GWT Tree dynamicaly (with the help of TreeLisner and method onTreeItemStateChanged) the horizontal scrollbar is not diplayed and the whole TabPanle is cut from downside for ~ 20px or so. If this TabPanel was added saticaly (testTree.addItem("StaticTree Item 2").addItem(panel);) everything is displayed OK.

GXT: 1.2.3

Both host mode and web mode.

Browsers: Firefox/3.0.7, IE 7.0.5730.11

OS: Windows XP

Sample Code:


import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.Tree;
import com.google.gwt.user.client.ui.TreeItem;
import com.google.gwt.user.client.ui.TreeListener;
import com.google.gwt.user.client.ui.RootPanel;

public class FastVersions implements EntryPoint {

public Tree setUpStaticTree() {

Tree testTree = new Tree();
String txt = "ddsgdfgsdfgsdgfdgsdgdfgd";

TabPanel folder = new TabPanel();
folder.setWidth(450);
folder.setAutoHeight(true);

TabItem shortText = new TabItem("Short Text");
shortText.addStyleName("pad-text");
shortText.addText(txt);
folder.add(shortText);

TabItem longText = new TabItem("Long Text");
longText.addStyleName("pad-text");
longText.addText(txt + "<br>" + txt);
folder.add(longText);

TabPanel panel = new TabPanel();
panel.setPlain(true);
panel.setSize(450, 250);
TabItem normal = new TabItem("Normal");
normal.addStyleName("pad-text");
normal.addText("Just a plain old tab");
panel.add(normal);

TabItem ajax1 = new TabItem("Ajax Tab");
ajax1.setScrollMode(Scroll.AUTO);
/*
* this is more or less irrelevant part it is just made to make sure
* that we need scrollBars
*/
VerticalPanel cont1 = new VerticalPanel();
ContentPanel cp = new ContentPanel();
cp.addText(txt + txt + txt + txt + "<br>" + txt + "<br>" + txt + "<br>"
+ txt + "<br>" + txt + "<br>" + txt + "<br>" + txt + "<br>"
+ txt + "<br>" + txt + "<br>" + txt + "<br>" + txt + "<br>"
+ txt + "<br>" + txt);
cp.setWidth(600);
ContentPanel c1 = new ContentPanel();
c1.setHeading("ddfdf");
cont1.add(cp);
cont1.add(c1);
ajax1.add(cont1);
panel.add(ajax1);
testTree.addItem("Static Tree Item 1").addItem("Just Text");
testTree.addItem("StaticTree Item 2").addItem(panel);
testTree.addItem("Static Tree Item 2").addItem(folder);
return testTree;
}

public void onModuleLoad() {
Viewport view = new Viewport();
view.setLayout(new BorderLayout());
ContentPanel vert = new ContentPanel();
Tree testTree = new Tree();

testTree.addItem("Tree Item 1").addItem("");
testTree.addItem("Tree Item 2").addItem("");
testTree.addItem("Tree Item 2").addItem("");

testTree.addTreeListener(new TreeListener() {
public void onTreeItemSelected(TreeItem item) {

}

public void onTreeItemStateChanged(TreeItem treeItem) {
treeItem.removeItems();
if (treeItem.getState()) {
TabPanel panel = new TabPanel();
panel.setPlain(true);
panel.setSize(450, 250);
String txt = "ddsgdfgsdfgsdgfdgsdgdfgd";

TabItem normal = new TabItem("Normal");
normal.addStyleName("pad-text");
normal.addText("Just a plain old tab");
panel.add(normal);

TabItem ajax1 = new TabItem("Ajax Tab");
ajax1.setScrollMode(Scroll.AUTO);
/*
* this is more or less irrelevant part it is just made to
* make sure that we need scrollBars
*/
VerticalPanel cont1 = new VerticalPanel();
ContentPanel cp = new ContentPanel();
cp.addText(txt + txt + txt + txt + "<br>" + txt + "<br>"
+ txt + "<br>" + txt + "<br>" + txt + "<br>" + txt
+ "<br>" + txt + "<br>" + txt + "<br>" + txt
+ "<br>" + txt + "<br>" + txt + "<br>" + txt
+ "<br>" + txt);
cp.setWidth(600);
ContentPanel c1 = new ContentPanel();
c1.setHeading("ddfdf");
cont1.add(cp);
cont1.add(c1);
ajax1.add(cont1);
panel.add(ajax1);
treeItem.addItem(panel);
} else {
treeItem.addItem("");
}
}
});

vert.add(testTree);
vert.add(setUpStaticTree());
view.add(vert, new BorderLayoutData(LayoutRegion.CENTER));
RootPanel.get().add(view);

}
}
I done some research myself with the firebug it turns out that height for x-tab-panel-body is 249 when I add dynamically thus it doesnot fit into TabPanel.

<div class="x-tab-panel-body x-tab-panel-body-top" style="height: 249px; width: 448px;">For statically added TabPanel this width attribute equals 224px

Probably it is a GWT Problem, but can you atleast have a look on it please. I am stuck with it for couple of days. I was trying several workarounds like haveing margins and so on but it does not help I am new to this web development and now I am out of any Ideas.

Thank you.

[sven]

Size the tabpanel after you add it to the tree. This is fixed in 2.0. The change to fix it also in 1.2.3 would be to big for the 1.2 branche.

[smfed]

Thanks a LOT!!!