Java 边界布局容器大小问题

我正在使用GWT和GXT。我想做一个边界布局

森查举例 Sencha站点上的Borderlayout示例如下所示： 这是从原来的Sencha GXT网站。这是一个源代码示例应用程序：

我的例子 我用这个源代码做了一个示例项目。但看起来是这样的：

我的问题 我的问题是，我希望看到North容器来填充可用空间。目前它仅显示在North容器的标题处

我的源代码与sencha站点的源代码相同

我怎样才能做到

---

源代码 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());
      }

    }

<!--

    Sencha GXT 3.1.2 - Sencha for GWT
    Copyright(c) 2007-2014, Sencha, Inc.
    licensing@sencha.com

    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>

package com.ex.borderlayout.client；
导入com.google.gwt.core.client.EntryPoint；
导入com.google.gwt.core.client.gwt；
导入com.google.gwt.uibinder.client.uibinder；
导入com.google.gwt.uibinder.client.UiField；
导入com.google.gwt.user.client.ui.FlexTable；
导入com.google.gwt.user.client.ui.IsWidget；
导入com.google.gwt.user.client.ui.RootPanel；
导入com.google.gwt.user.client.ui.Widget；
导入com.sencha.gxt.core.client.Style.LayoutRegion；
导入com.sencha.gxt.core.client.util.Margins；
导入com.sencha.gxt.widget.core.client.Component；
导入com.sencha.gxt.widget.core.client.button.TextButton；
导入com.sencha.gxt.widget.core.client.container.BorderLayoutContainer；
导入com.sencha.gxt.widget.core.client.container.BorderLayoutContainer.BorderLayoutData；
导入com.sencha.gxt.widget.core.client.container.MarginData；
导入com.sencha.gxt.widget.core.client.event.SelectEvent；
导入com.sencha.gxt.widget.core.client.event.SelectEvent.SelectHandler；
公共类BorderLayoutUiBinderExample实现IsWidget入口点{
私有静态MyUiBinder=GWT.create（MyUiBinder.class）；
接口MyUiBinder扩展了UiBinder{}
@UiField（提供的=真）
外部边缘数据=新边缘数据（10）；
@UiField（提供的=真）
BorderLayoutData northData=新的BorderLayoutData（100）；
@UiField（提供的=真）
BorderLayoutData westData=新的BorderLayoutData（150）；
@UiField（提供的=真）
MarginData centerData=新的MarginData（）；
@UiField（提供的=真）
BorderLayoutData eastData=新的BorderLayoutData（150）；
@UiField（提供的=真）
BorderLayoutData southData=新的BorderLayoutData（100）；
@尤菲尔德
边界布局；
@尤菲尔德
柔性工作台；
私有小部件；
公共小部件asWidget（）{
if（widget==null）{
设定利润率（新利润率（5））；
设定利润率（新利润率（0,5,0,5））；
westData.setcollapsable（真）；
westData.setSplit（真）；
设置边距（新边距（0,5,0,5））；
设定利润率（新利润率（5））；
widget=uiBinder.createAndBindUi（这个）；
对于（int i=0；i

BorderLayoutUiBinderExample.ui.xml:

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());
      }

    }

<!--

    Sencha GXT 3.1.2 - Sencha for GWT
    Copyright(c) 2007-2014, Sencha, Inc.
    licensing@sencha.com

    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>

.centerMargin{
利润率：10px；
}

如果要将布局划分为两个区域，则只需使用两个容器-

中部

和

南部

比如说,

<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>

---

要使海王星主题发挥作用，请添加：

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

这将创建一个类似于Sencha示例的BorderLayoutContainer

---

希望有帮助。

好的，谢谢！但这不是我的问题。我希望北方的容器像sencha站点一样填满可用空间谢谢！真管用！这看起来是一个非常有用的解决方案。视口可以自动调整大小。