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

[stephen_mcleod]

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]

Here's the output from running the above example:

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

[gslender]

try setting a FillLayout to the tabitem

[stephen_mcleod]

I tried adding

        tab.setLayout(new FillLayout());

as suggested above, however this results in the tab content not being displayed at all.

[darrellmeyer]

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]

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.