BorderLayout within a TabItem - no content being displayed

[iwebdev]

I'm working on creating a dialog window that has 2 tabs in it. The first tab contains a border layout with a grid in the NORTH panel and another grid in the CENTER panel. There's also a split between these panels. The second tab contains only a single grid. I've tried various approaches and have not been able to get it to display as I need. Here's the current code:

package com.test.client;


import java.util.ArrayList;
import java.util.List;


import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.extjs.gxt.ui.client.widget.layout.FitData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.i18n.client.DateTimeFormat;




public class EvidenceView extends Dialog 
{
    public EvidenceView() {
        setModal(true);
        setBorders(true);
        setBlinkModal(true);
        setHeading("Display of Evidence");
        
        // Create the columns config
        List<ColumnConfig> hospitalColumnsConfig = new ArrayList<ColumnConfig>();
        List<ColumnConfig> poColumnsConfig = new ArrayList<ColumnConfig>();
        List<ColumnConfig> rawColumnsConfig = new ArrayList<ColumnConfig>();


        // Create the hospital data column config
        hospitalColumnsConfig.add(new ColumnConfig("forum", "Forum", 150));  
        hospitalColumnsConfig.add(new ColumnConfig("username", "Username", 100));  
        hospitalColumnsConfig.add(new ColumnConfig("subject", "Subject", 200));  
        ColumnConfig hospitalDate = new ColumnConfig("date", "Date", 100);  
        hospitalDate.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/y"));  
        hospitalColumnsConfig.add(hospitalDate);


        // Create the po data column config
        poColumnsConfig.add(new ColumnConfig("forum", "Forum", 150));  
        poColumnsConfig.add(new ColumnConfig("username", "Username", 100));  
        poColumnsConfig.add(new ColumnConfig("subject", "Subject", 200));  
        ColumnConfig poDate = new ColumnConfig("date", "Date", 100);  
        poDate.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/y"));  
        poColumnsConfig.add(poDate);


        
        // Create the raw data column config
        rawColumnsConfig.add(new ColumnConfig("forum", "Forum", 150));  
        rawColumnsConfig.add(new ColumnConfig("username", "Username", 100));  
        rawColumnsConfig.add(new ColumnConfig("subject", "Subject", 200));  
        ColumnConfig rawDate = new ColumnConfig("date", "Date", 100);  
        rawDate.setDateTimeFormat(DateTimeFormat.getFormat("MM/dd/y"));  
        rawColumnsConfig.add(rawDate);




        // Create the column models
        ColumnModel hospitalColumnsModel = new ColumnModel(hospitalColumnsConfig);
        ColumnModel poColumnsModel = new ColumnModel(poColumnsConfig);
        ColumnModel rawColumnsModel = new ColumnModel(rawColumnsConfig);
        


        // Create the TabPanel
        TabPanel tabPanel = new TabPanel();
        
        // Create the Supporting Data tab
        TabItem supportingDataTab = new TabItem("Supporting Data");
        supportingDataTab.setLayout(new FitLayout());
        
        // Create the layout container for the Supporting Data tab
        LayoutContainer supportingDataTabLayoutContainer = new LayoutContainer();
        supportingDataTabLayoutContainer.setLayout(new BorderLayout());
            
        // Create the Hospital Data grid
        Grid hospitalDataGrid = new Grid(new ListStore(), hospitalColumnsModel);
        hospitalDataGrid.setColumnLines(true);
        hospitalDataGrid.setBorders(true);
        
        // Create the PO Data grid
        Grid poDataGrid = new Grid(new ListStore(), poColumnsModel);
        poDataGrid.setColumnLines(true);
        poDataGrid.setBorders(true);




        // Create the Supporting Data layout data
        BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH, 0.4f);
        northData.setSplit(true);
        northData.setCollapsible(true);
        northData.setMargins(new Margins(5, 5, 5, 5));
        
        BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER, 0.4f);
        centerData.setSplit(true);
        centerData.setCollapsible(true);
        centerData.setMargins(new Margins(5, 5, 5, 5));


        
        // Add the grids with their associated layout data to the Supporting Data layout container 
        supportingDataTabLayoutContainer.add(hospitalDataGrid, northData);
        supportingDataTabLayoutContainer.add(poDataGrid, centerData);


        // Add the Supporting Data layout container to the Supporting Data tab
        supportingDataTab.add(supportingDataTabLayoutContainer, new FitData(0));
        
        
        // Create the Raw Data tab
        TabItem rawDataTab = new TabItem("Raw Data");
        rawDataTab.setLayout(new FitLayout());
        
        // Create the layout container for the Supporting Data tab
        LayoutContainer rawDataTabLayoutContainer = new LayoutContainer();
        rawDataTabLayoutContainer.setLayout(new FitLayout());
        
        // Create the Raw Data grid
        Grid rawDataGrid = new Grid(new ListStore(), rawColumnsModel);
        rawDataGrid.setColumnLines(true);
        rawDataGrid.setBorders(true);
        
        // Add the raw data grid to the Raw Data layout container
        rawDataTabLayoutContainer.add(rawDataGrid);
        
        // Add the raw data layout container to the Raw Data tab
        rawDataTab.add(rawDataTabLayoutContainer);
        
        // Add the tabs to the tabPanel
        tabPanel.add(supportingDataTab);
        tabPanel.add(rawDataTab);
        
        // Add the tabPanel to the view
        add(tabPanel);
    }


}

What am I missing or doing wrong?

Thanks,
Rob

[Colin Alworth]

First thing I would say would be to set the size of the dialog, and assign a FitLayout, so that the TabPanel is sized to the space available in the dialog. Looks like most/all of the other containers have layouts, so that should be the size needed to pass along sizing to other widgets.

I think the rawDataTabLayoutContainer is unnecessary, as it has a fitlayout, and so does its parent, so the tab is sizes the layout container, and the layout container sizes the grid. Instead, just have the tab size the grid, and skip the layout container.

Also, I believe there is no need to use FitData if you are setting the margin to be zero - I think that is the default.
[FONT=Menlo, 'Courier New', Courier, monospace][/FONT]

[iwebdev]

Thanks, that took care of the issue. I added "setLayout(new FitLayout());" in the constructor and now everything is displayed. I made the incorrect assumption that Dialog had a default FitLayout assigned and never checked.

Many thanks!

[Colin Alworth]

By default, I believe all layoutcontainers get FlowLayout, which implies no layout at all, except for what html and css will do.

[iwebdev]

Thanks Colin!