View Full Version : BorderLayout within a TabItem - no content being displayed

26 Sep 2011, 7:09 AM
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() {
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);

// 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);

// 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);

// 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);

// Create the PO Data grid
Grid poDataGrid = new Grid(new ListStore(), poColumnsModel);

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

BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER, 0.4f);
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);

// Add the raw data grid to the Raw Data layout container

// Add the raw data layout container to the Raw Data tab

// Add the tabs to the tabPanel

// Add the tabPanel to the view


What am I missing or doing wrong?


Colin Alworth
26 Sep 2011, 8:34 AM
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.

26 Sep 2011, 11:05 AM
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
26 Sep 2011, 11:18 AM
By default, I believe all layoutcontainers get FlowLayout, which implies no layout at all, except for what html and css will do.

26 Sep 2011, 1:20 PM
Thanks Colin!