BorderLayout container size probleme

Question

I'm using GWT and GXT. I would like to make a BorderLayout.

Example by Sencha

The example Borderlayout on the Sencha site looks like this: This is from the original Sencha GXT site. It's an example application with source code: enter link description here

My example

I made an example project with this source code. But it looks like this:

My problem

My problem is that I would like to see the North container to fill the available space. Currently it appear just the header of the North container.

My souce code is the same like at the sencha site.

How can I achive that?

---

Source code

BorderLayoutUiBinderExample.java:

package com.ex.borderlayout.client;


import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.IsWidget;
import com.google.gwt.user.client.ui.RootPanel;
import com.google.gwt.user.client.ui.Widget;
import com.sencha.gxt.core.client.Style.LayoutRegion;
import com.sencha.gxt.core.client.util.Margins;
import com.sencha.gxt.widget.core.client.Component;
import com.sencha.gxt.widget.core.client.button.TextButton;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer;
import com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData;
import com.sencha.gxt.widget.core.client.container.MarginData;
import com.sencha.gxt.widget.core.client.event.SelectEvent;
import com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler;



public class BorderLayoutUiBinderExample implements IsWidget, EntryPoint {

      private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);      
      interface MyUiBinder extends UiBinder<Widget, BorderLayoutUiBinderExample> {}


      @UiField(provided = true)
      MarginData outerData = new MarginData(10);
      @UiField(provided = true)
      BorderLayoutData northData = new BorderLayoutData(100);
      @UiField(provided = true)
      BorderLayoutData westData = new BorderLayoutData(150);
      @UiField(provided = true)
      MarginData centerData = new MarginData();
      @UiField(provided = true)
      BorderLayoutData eastData = new BorderLayoutData(150);
      @UiField(provided = true)
      BorderLayoutData southData = new BorderLayoutData(100);
      @UiField
      BorderLayoutContainer con;
      @UiField
      FlexTable table;


      private Widget widget;

      public Widget asWidget() {
        if (widget == null) {
          northData.setMargins(new Margins(5));
          westData.setMargins(new Margins(0, 5, 0, 5));
          westData.setCollapsible(true);
          westData.setSplit(true);
          eastData.setMargins(new Margins(0, 5, 0, 5));
          southData.setMargins(new Margins(5));

          widget = uiBinder.createAndBindUi(this);

          for (int i = 0; i < LayoutRegion.values().length; i++) {
            final LayoutRegion r = LayoutRegion.values()[i];
            if (r == LayoutRegion.CENTER) {
              continue;
            }

            SelectHandler handler = new SelectHandler() {
              @Override
              public void onSelect(SelectEvent event) {
                TextButton btn = (TextButton) event.getSource();
                String txt = btn.getText();
                if (txt.equals("Expand")) {
                  con.expand(r);
                } else if (txt.equals("Collapse")) {
                  con.collapse(r);
                } else if (txt.equals("Show")) {
                  con.show(r);
                } else {
                  con.hide(r);
                }
              }
            };

            table.setHTML(i, 0, "<div style='font-size: 12px; width: 100px'>" + r.name() + ":</span>");
            table.setWidget(i, 1, new TextButton("Expand", handler));
            table.setWidget(i, 2, new TextButton("Collapse", handler));
            table.setWidget(i, 3, new TextButton("Show", handler));
            table.setWidget(i, 4, new TextButton("Hide", handler));

          }
        }

        return widget;
      }

      public void onModuleLoad() {
        RootPanel.get().add(asWidget());
      }

    }

BorderLayoutUiBinderExample.ui.xml:

<!--

    Sencha GXT 3.1.2 - Sencha for GWT
    Copyright(c) 2007-2014, Sencha, Inc.
    [email protected]

    http://www.sencha.com/products/gxt/license/

-->
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:container="urn:import:com.sencha.gxt.widget.core.client.container"
    xmlns:gxt="urn:import:com.sencha.gxt.widget.core.client">

  <ui:style>
    .centerMargin {
        margin: 10px;
    }
  </ui:style>

  <ui:with type="com.sencha.gxt.widget.core.client.container.MarginData" field="outerData" />
  <ui:with type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData" field="northData" />
  <ui:with type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData" field="westData" />
  <ui:with type="com.sencha.gxt.widget.core.client.container.MarginData" field="centerData" />
  <ui:with type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData" field="eastData" />
  <ui:with type="com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData" field="southData" />

  <container:SimpleContainer>
    <container:child layoutData="{outerData}">
      <container:BorderLayoutContainer ui:field="con" borders="true">

        <container:north layoutData="{northData}">
          <gxt:ContentPanel />
        </container:north>

        <container:west layoutData="{westData}">
          <gxt:ContentPanel />
        </container:west>

        <container:center layoutData="{centerData}">
          <gxt:ContentPanel headingText="BorderLayout UiBinder Example" resize="false">
            <g:FlexTable ui:field="table" addStyleNames="{style.centerMargin}" cellSpacing="8" cellPadding="4" />
          </gxt:ContentPanel>
        </container:center>

        <container:east layoutData="{eastData}">
          <gxt:ContentPanel />
        </container:east>

        <container:south layoutData="{southData}">
          <gxt:ContentPanel />
        </container:south>

      </container:BorderLayoutContainer>
    </container:child>
  </container:SimpleContainer>

</ui:UiBinder>

Answer 1

To get the Neptune theme working, add:

<inherits name='com.sencha.gxt.theme.neptune.Theme' />

to your module descriptor.

Create a ViewPort and add the it with RootLayoutPanel.get().add(vp).

Add your widget to the viewport:

   public void onModuleLoad() {
        Viewport vp = new Viewport();
        vp.add(asWidget());
        RootLayoutPanel.get().add(vp);
    }

This will create a BorderLayoutContainer similar to the one of the Sencha example.

Hope that helps.

Answer 2

If you want to divide the layout into two areas, you will need to use only two containers - center and south.

For example,

<container:SimpleContainer>
    <container:child layoutData="{outerData}">
      <container:BorderLayoutContainer ui:field="con">

        <container:center layoutData="{centerData}">
          <gxt:ContentPanel>
            <g:FlexTable ui:field="table"/>
          </gxt:ContentPanel>
        </container:center>

        <container:south layoutData="{southData}">
          <gxt:ContentPanel />
        </container:south>

      </container:BorderLayoutContainer>
    </container:child>
</container:SimpleContainer>