BorderLayout容器大小问题

时间：2014-11-18 02:16:42

标签： java user-interface gwt gxt border-layout

我正在使用GWT和GXT。我想制作一个BorderLayout。

Sencha的例子

Sencha网站上的Borderlayout示例如下所示： enter image description here 这是来自最初的Sencha GXT网站。它是一个带有源代码的示例应用程序： enter link description here

我的例子

我用这个源代码制作了一个示例项目。但它看起来像这样： enter image description here

我的问题

我的问题是我希望看到 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());
      }

    }

BorderLayoutUiBinderExample.ui.xml： 

<!--

    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>

2 个答案:

答案 0 :(得分：1)

如果您想将布局划分为两个区域，则只需使用两个容器 - center和south。

例如，

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

答案 1 :(得分：0)

要使Neptune主题正常工作，请添加：

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

到您的模块描述符。

创建一个ViewPort并使用RootLayoutPanel.get().add(vp)添加它。

将小部件添加到视口：

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

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

希望有所帮助。

相关问题
最新问题