PDA

View Full Version : [CLOSED] 1.0-Beta-2: Border Layout inside TabPanel displayed incorrectly.



stephen_mcleod
2 May 2008, 8:26 PM
If I create a TabPanel and add a Container with BorderLayout to a TabPanelItem inside it, the container content is not displayed inside the tab panel. eg:




import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.widget.Container;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
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.Label;
import com.google.gwt.user.client.ui.RootPanel;

@SuppressWarnings("unchecked")
public class TestGxt implements EntryPoint {

/**
* @see com.google.gwt.core.client.EntryPoint#onModuleLoad()
*/
public final void onModuleLoad() {

TabPanel tabPanel = new TabPanel();
TabItem tab = new TabItem("Tab");

Container content = new Container();
content.setLayout(new BorderLayout());

Container center = new Container();
BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
center.add(new Label("Center"));

content.add(center, centerData);
content.layout(true);

tab.add(content);
tabPanel.add(tab);

RootPanel.get().add(tabPanel);
}

}

In this case, I would expect the "Center" label to be displayed inside the tab panel. Instead, it is displayed at the top, overlapping the "Tab" panel label.

I'm running GXT 1.0-Beta-2 on Ubuntu 8.04, JDK6.

This worked correctly in 1.0-Beta-1.

stephen_mcleod
2 May 2008, 9:05 PM
Here's the output from running the above example:

http://img74.imageshack.us/my.php?image=bugty0.png

gslender
2 May 2008, 10:14 PM
try setting a FillLayout to the tabitem

stephen_mcleod
3 May 2008, 12:29 AM
I tried adding



tab.setLayout(new FillLayout());
as suggested above, however this results in the tab content not being displayed at all.

darrellmeyer
4 May 2008, 7:21 PM
This is not a bug. TabPanel needs a fixed size to render properly and the TabItem needs a FillLayout. Also, TabItem is a container so you could assign the border layout to it directly. Try this:


public void onModuleLoad() {
TabPanel tabPanel = new TabPanel();
TabItem tab = new TabItem("Tab");
tab.setLayout(new FitLayout());
Container content = new Container();
content.setLayout(new BorderLayout());

Container center = new Container();
BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
center.add(new Label("Center"));

content.add(center, centerData);

tab.add(content);
tabPanel.add(tab);

tabPanel.setSize(400, 300);
RootPanel.get().add(tabPanel);
}

dpwrussell
9 Apr 2010, 4:03 AM
This is not a bug. TabPanel needs a fixed size to render properly and the TabItem needs a FillLayout. Also, TabItem is a container so you could assign the border layout to it directly. Try this:


public void onModuleLoad() {
TabPanel tabPanel = new TabPanel();
TabItem tab = new TabItem("Tab");
tab.setLayout(new FitLayout());
Container content = new Container();
content.setLayout(new BorderLayout());

Container center = new Container();
BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
center.add(new Label("Center"));

content.add(center, centerData);

tab.add(content);
tabPanel.add(tab);

tabPanel.setSize(400, 300);
RootPanel.get().add(tabPanel);
}

This is old, but thanks a lot for that, solved my problem! It doesn't seem to be necessary to set the sizes anymore, just setting the TabItem to FitLayout was enough. Cheers.