BorderLayout using Ext GWT - LayoutRegion.SOUTH displays NORTH

Question

I'm trying to simply reproduce the sample of BorderLayout on the Sencha website, but the South region won't show up in FF. Here is my following code:

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

Maybe you can try setting the size of the frame instance:

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