Help getting started with BorderLayout example

[SuperSloMo]

I am completely new to Ext GWT and don't have a lot of web GUI programming experience generally. The place I work now uses Ext GWS, and I have an assignment to create a new web app, so I decided to get started by naively taking one of the Sencha demos (the BorderLayout one) and putting the code into an onModuleLoad function. I created a Viewport object within the function and directed modified demo source code to use it, but I did it wrong and/or left something out because it displays only the labels and buttons in rows and columns and doesn't display the north, south, east and west panes. Clicking the buttons calls the componentSelect function defined in the code, but the display in the web pane doesn't change. Could you help me understand what I need to change or add to make this work the way the BorderLayout demo works? Thanks.

Here is the source code I have so far:

package org.myorg.gwt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.FlexTable;
import com.google.gwt.user.client.ui.RootPanel;

import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
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.button.Button;
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.extjs.gxt.ui.client.widget.Viewport;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class MyViewer implements EntryPoint {
    public void onModuleLoad() {
        Viewport viewport = new Viewport();
        final BorderLayout layout = new BorderLayout();

        viewport.setLayout(layout);
        viewport.setLayoutOnChange(true);
        viewport.setMonitorWindowResize(true);
        viewport.setBorders(true);

        LayoutContainer container = new LayoutContainer();
        container.setLayoutOnChange(true);
        container.setMonitorWindowResize(true);
        container.setBorders(true);

        viewport.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);

        for (int i = 0; i < LayoutRegion.values().length; i++) {
            final LayoutRegion reg = LayoutRegion.values()[i];
            
            if (reg == LayoutRegion.CENTER) {
                continue;
            }
            SelectionListener<ButtonEvent> sl = new SelectionListener<ButtonEvent>() {

                @Override
                public void componentSelected(ButtonEvent ce) {
                    String txt = ce.getButton().getText();

                    if (txt.equals("Expand")) {
                        layout.expand(reg);
                    } else if (txt.equals("Collapse")) {
                        layout.collapse(reg);
                    } else if (txt.equals("Show")) {
                        layout.show(reg);
                    } else {
                        layout.hide(reg);
                    }
                }
            };
            table.setHTML(i, 0, "<div style='font-size: 12px; width: 100px'>" + reg.name() + ":</span>");
            table.setWidget(i, 1, new Button("Expand", sl));
            table.setWidget(i, 2, new Button("Collapse", sl));
            table.setWidget(i, 3, new Button("Show", sl));
            table.setWidget(i, 4, new Button("Hide", sl));
        }
        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));

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

        viewport.add(container);
        RootPanel.get().add(viewport);
    }
}

[sven]

Your container where you add multiply widgets does not have the borderlayout. I modified your code:

class MyViewer implements EntryPoint {
  public void onModuleLoad() {
    Viewport viewport = new Viewport();
    final BorderLayout layout = new BorderLayout();

    viewport.setLayout(new FitLayout());
    viewport.setBorders(true);

    LayoutContainer container = new LayoutContainer();
    container.setLayout(layout);
    container.setBorders(true);

    viewport.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);

    for (int i = 0; i < LayoutRegion.values().length; i++) {
      final LayoutRegion reg = LayoutRegion.values()[i];

      if (reg == LayoutRegion.CENTER) {
        continue;
      }
      SelectionListener<ButtonEvent> sl = new SelectionListener<ButtonEvent>() {

        @Override
        public void componentSelected(ButtonEvent ce) {
          String txt = ce.getButton().getText();

          if (txt.equals("Expand")) {
            layout.expand(reg);
          } else if (txt.equals("Collapse")) {
            layout.collapse(reg);
          } else if (txt.equals("Show")) {
            layout.show(reg);
          } else {
            layout.hide(reg);
          }
        }
      };
      table.setHTML(i, 0, "<div style='font-size: 12px; width: 100px'>" + reg.name() + ":</span>");
      table.setWidget(i, 1, new Button("Expand", sl));
      table.setWidget(i, 2, new Button("Collapse", sl));
      table.setWidget(i, 3, new Button("Show", sl));
      table.setWidget(i, 4, new Button("Hide", sl));
    }
    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));

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

    viewport.add(container);
    RootPanel.get().add(viewport);
  }
}

[SuperSloMo]

I'm not sure why, but that change didn't work for me. I am using a FireFox browser, and when I made the changes you provided, it displayed the "BorderLayout Example" label and "North:" label and buttons at the bottom of the page. The other lines are probably below the north one, below the bottom of the page. There are no north, south, east or west panes, and the buttons don't change the display.

[sven]

This is how it looks for me. I jsut run the code i gave you again:

[SuperSloMo]

Is there anything in the file outside of the onModuleLoad function that might be needed to make the code work? I'm not getting anything but the center panel, and it's down at the bottom left part of the page with most of the rows below the bottom of the page.

[SuperSloMo]

It turns out that I also didn't have the gxt-all.css file in the right place and it wasn't being found. Now my display looks right. Thanks very much for your help.