Why is the Button in the CardPanel not visible (Sencha gxt)

Question

I don't understand why I don't see my Button in the CardPanel. On the final page is see no UI components. Maybe I'm missing something...

We're using GXT 2.3.1

import com.extjs.gxt.ui.client.widget.CardPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class Foobar implements EntryPoint {

  @Override
  public void onModuleLoad() {
    CardPanel cpanel = new CardPanel();
    cpanel.setActiveItem(new Button("FooButton1"));
    RootPanel.get().add(cpanel);
  }
}

Answer 1

I've never used the CardPanel but I'm pretty sure you're using it wrong.

Setting the widget "active" can only happen if the widget is already added to the panel. You need to add() the widget to the panel before setting it active.

Try this:

import com.extjs.gxt.ui.client.widget.CardPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

public class Foobar implements EntryPoint {

    @Override
    public void onModuleLoad() {
        CardPanel cpanel = new CardPanel();
        Button btn = new Button("FooButton1")
        cpanel.add(btn);
        cpanel.setActiveItem(btn);
        RootPanel.get().add(cpanel);
    }
}