使用 Ext GWT 的 BorderLayout - LayoutRegion.SOUTH 显示 NORTH

Question

我试图简单地重现 Sencha 网站上的 BorderLayout 示例，但南部区域不会显示在 FF 中。这是我的以下代码：

package com.google.gwt.test.client;

import com.extjs.gxt.ui.client.Style.LayoutRegion;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.util.Margins;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.BorderLayout;
import com.extjs.gxt.ui.client.widget.layout.BorderLayoutData;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Element;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.RootPanel;


public class Test implements EntryPoint {

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

    public class Frame extends LayoutContainer {

        protected void onRender(Element target, int index) {  
            super.onRender(target, index);  
            final BorderLayout layout = new BorderLayout();  
            setLayout(layout);  
            setStyleAttribute("padding", "10px");  

            ContentPanel north = new ContentPanel();  
            ContentPanel west = new ContentPanel();  
            ContentPanel center = new ContentPanel();  
            center.setHeading("BorderLayout Example");  
            center.setScrollMode(Scroll.AUTOX);  

            FlexTable table = new FlexTable();  
            table.getElement().getStyle().setProperty("margin", "10px");  
            table.setCellSpacing(8);  
            table.setCellPadding(4);  

            center.add(table);  

            ContentPanel east = new ContentPanel();  
            ContentPanel south = new ContentPanel();  

            BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH, 100);  
            northData.setCollapsible(true);  
            northData.setFloatable(true);  
            northData.setHideCollapseTool(true);  
            northData.setSplit(true);  
            northData.setMargins(new Margins(0, 0, 5, 0));  

            BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST, 150);  
            westData.setSplit(true);  
            westData.setCollapsible(true);  
            westData.setMargins(new Margins(0,5,0,0));  

            BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);  
            centerData.setMargins(new Margins(0));  

            BorderLayoutData eastData = new BorderLayoutData(LayoutRegion.EAST, 150);  
            eastData.setSplit(true);  
            eastData.setCollapsible(true);  
            eastData.setMargins(new Margins(0,0,0,5));  

            BorderLayoutData southData = new BorderLayoutData(LayoutRegion.SOUTH, 100);  
            southData.setSplit(true);  
            southData.setCollapsible(true);  
            southData.setFloatable(true);  
            southData.setMargins(new Margins(5, 0, 0, 0));  

            add(north, northData);  
            add(west, westData);  
            add(center, centerData);  
            add(east, eastData);  
            add(south, southData);  
        }  
    }        
}

Answer 1

你必须给你的面板一个尺寸，就像：

    final Viewport v = new Viewport();
    v.setLayout(new FitLayout());

    LayoutContainer mf = new LayoutContainer();
    mf.setLayout(new BorderLayout());
    v.add(mf);

    RootLayoutPanel.get().add(v);

你可以找到更多信息@
http://www.sencha .com/forum/showthread.php?105117-Border-layout-example-not-working&highlight=BorderLayoutExample

Answer 2

也许您可以尝试设置框架实例的大小：

Frame frame = new Frame();
frame.setSize(1000, 800);
RootPanel.get().add(frame);