Basics of Using Buttons

[papajohn]

I need some help understanding how events are handled. Here's an example where I think pressing the button should add "Line 2" to a Vertical Panel (line 35), but nothing happens (the Info.display call works fine, the item count goes up, but the text "Line 2" never appears). I hope what I would like to happen is obvious from the code, but if not I'd be happy to elaborate. Do I need to explicitly call a refresh or something?

Thanks in advance,
John

package test.client;

import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.Button;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Info;
import com.extjs.gxt.ui.client.widget.Text;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

/**
* Entry point classes define <code>onModuleLoad()</code>.
*/
public class Test implements EntryPoint {

/**
* This is the entry point method.
*/
public void onModuleLoad() {
ContentPanel mainPanel = new ContentPanel();

mainPanel.setTitle("Hello World!");
mainPanel.setHeight(300);
mainPanel.setWidth(500);

final VerticalPanel contents = new VerticalPanel();

Button button = new Button("Add Line",
new SelectionListener<ButtonEvent>() {

public void componentSelected(ButtonEvent ce) {
Info.display("Contents", contents.getItemCount() + " items");
contents.add(new Text("Line 2")); // Nothing appears
Info.display("Contents", contents.getItemCount() + " items");
}

});

contents.add(button);
contents.add(new Text("Line 1"));

mainPanel.add(contents);

RootPanel.get().add(mainPanel);
}
}

[gslender]

try adding contents.layout(true);

in the componentSelected method after the add