1. #1
    Ext User
    Join Date
    Apr 2008
    Posts
    8
    Vote Rating
    0
    stephen_mcleod is on a distinguished road

      0  

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

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


    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:

    Code:
    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.

  2. #2
    Ext User
    Join Date
    Apr 2008
    Posts
    8
    Vote Rating
    0
    stephen_mcleod is on a distinguished road

      0  

    Default


    Here's the output from running the above example:

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

  3. #3
    Ext GWT Premium Member gslender's Avatar
    Join Date
    Mar 2008
    Location
    Brisbane, Australia
    Posts
    1,572
    Vote Rating
    2
    gslender is on a distinguished road

      0  

    Default


    try setting a FillLayout to the tabitem

  4. #4
    Ext User
    Join Date
    Apr 2008
    Posts
    8
    Vote Rating
    0
    stephen_mcleod is on a distinguished road

      0  

    Default


    I tried adding

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

  5. #5
    Sencha - GXT Dev Team darrellmeyer's Avatar
    Join Date
    May 2007
    Location
    Washington, DC
    Posts
    2,242
    Vote Rating
    2
    darrellmeyer is on a distinguished road

      0  

    Default


    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:

    Code:
        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);
      }

  6. #6
    Ext User
    Join Date
    Dec 2009
    Posts
    6
    Vote Rating
    0
    dpwrussell is on a distinguished road

      0  

    Default


    Quote Originally Posted by darrellmeyer View Post
    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:

    Code:
        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.