Rendering GXT elements on page

Question

I have a question about rendering Sencha elements to DOM dynamically. I have button on page that load users from DB and must render Basic Grid . I have following code:

Button users = new Button("Users", new SelectionListener<ButtonEvent>() {
        @Override
        public void componentSelected(ButtonEvent ce) {
            userServiceAsync.getUsers(new AsyncCallback<List<User>>() {
                @Override
                public void onFailure(Throwable caught) {
                    Window.alert("ololo!");
                }

                @Override
                public void onSuccess(List<User> result) {
                    center.add(new com.google.gwt.user.client.ui.Button("OloloBtn")); // this renders
                    center.add(new UserTable(result)); // and this not
                    center.layout(true);

                }
            });
        }
    });

Code of UserTable:

import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.grid.ColumnConfig;
import com.extjs.gxt.ui.client.widget.grid.ColumnModel;
import com.extjs.gxt.ui.client.widget.grid.Grid;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.google.gwt.user.client.Element;
import com.myproject.client.model.User;

import java.util.ArrayList;
import java.util.List;

public class UserTable extends LayoutContainer {
private List<User> users;

public UserTable(List<User> users) {
    this.users = users;
}

@Override
protected void onRender(Element parent, int index) {
    List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
    configs.add(new ColumnConfig("login", "Login", 100));
    configs.add(new ColumnConfig("email", "Email", 100));
    configs.add(new ColumnConfig("firstName", "First Name", 100));
    configs.add(new ColumnConfig("lastName", "Last Name", 100));
    ListStore<User> listStore = new ListStore<User>();
    listStore.add(users);
    ColumnModel cm = new ColumnModel(configs);
    Grid<User> grid = new Grid<User>(listStore, cm);
    ContentPanel cp = new ContentPanel();
    cp.setBodyBorder(false);
    cp.setHeading("Employee List");
    cp.setLayout(new FitLayout());
    cp.setSize(700, 300);
    cp.add(grid);
    add(cp);
}
}

So, users loads from DB. Problem is in rendering table to page. In onSuccess method of button listener I tried to render GWT Button and this works fine. But table with users do not appends to DOM. What is wrong?

Thanks for your answers.

Answer 1

You need to call super.onRender(parent, index) when you enter your override.