[SOLVED] Grid does not display when created from button onClick handler

[gmarziou]

Hello,

I got a grid inside a tab that displays well when I create it inside onModuleLoad() but does not display when I create it in a button's onClick() handler.
I tried to call show(), refresh() on my tabs and many other things but could not make it work.

Thanks for any help,

Gael

Here is a working test case:

package com.example.client;

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

import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
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.EditorGrid;

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

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

	public void onModuleLoad() {
		// Create 2 tabs
		final TabPanel tabs = new TabPanel();
		tabs.setSize(600, 250);
		tabs.setMinTabWidth(115);
		tabs.setResizeTabs(true);
		   
		final TabItem customersTab = new TabItem();
		customersTab.setText("Customers");
		customersTab.setClosable(true);
		tabs.add(customersTab);

		TabItem applicationsTab = new TabItem();
		applicationsTab.setText("Applications");
		tabs.add(applicationsTab);

		// A button that will create a grid in customers tab
		Button button = new Button("Add grid") {
			@Override
			protected void onClick(ComponentEvent ce) {
				super.onClick(ce);

				// Create store
				ListStore<Customer> store = createStore();

				// Create Grid
				List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
				configs.add(new ColumnConfig("name", "Name", 150));
				EditorGrid<ModelData> customersGrid = new EditorGrid<ModelData>(
						store, new ColumnModel(configs));
				customersGrid.setBorders(true);
				customersGrid.setHeight(200);
				customersGrid.setStripeRows(true);

				// remove button and add grid
				customersTab.remove(this);
				customersTab.add(customersGrid);
			}

		};
		customersTab.add(button);

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

	private ListStore<Customer> createStore() {
		ListStore<Customer> store = new ListStore<Customer>();
		store.add(new Customer("Gael Marziou"));
		store.add(new Customer("Pierre Fouche"));
		return store;
	}

	class Customer extends BaseModelData {
		public Customer(String name) {
			super();
			setName(name);
		}

		public void setName(String name) {
			set("name", name);
		}

		public String getName() {
			return get("name");
		}
	}
}

[sven]

After

customersTab.add(customersGrid);

you need to add

customersTab.layout();

[gmarziou]

Thanks a lot, it works now.
So the basic rule is to call layout() on the container that owns the widgets we changed.

I put the "final" code below for reference.

package com.example.client;

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

import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.store.ListStore;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
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.EditorGrid;

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

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

	public void onModuleLoad() {
		// Create 2 tabs
		final TabPanel tabs = new TabPanel();
		tabs.setSize(600, 250);
		tabs.setMinTabWidth(115);
		tabs.setResizeTabs(true);
		   
		final TabItem customersTab = new TabItem();
		customersTab.setText("Customers");
		customersTab.setClosable(true);
		tabs.add(customersTab);

		TabItem applicationsTab = new TabItem();
		applicationsTab.setText("Applications");
		tabs.add(applicationsTab);

		// A button that will create a grid in customers tab
		Button button = new Button("Add grid") {
			@Override
			protected void onClick(ComponentEvent ce) {
				super.onClick(ce);

				// Create store
				ListStore<Customer> store = createStore();

				// Create Grid
				List<ColumnConfig> configs = new ArrayList<ColumnConfig>();
				configs.add(new ColumnConfig("name", "Name", 150));
				EditorGrid<ModelData> customersGrid = new EditorGrid<ModelData>(
						store, new ColumnModel(configs));
				customersGrid.setBorders(true);
				customersGrid.setHeight(200);
				customersGrid.setStripeRows(true);

				// remove button and add grid
				customersTab.remove(this);
				customersTab.add(customersGrid);
				// Required otherwise the grid won't displays
				customersTab.layout();
			}

		};
		customersTab.add(button);
		RootPanel.get().add(tabs);	
	}

	private ListStore<Customer> createStore() {
		ListStore<Customer> store = new ListStore<Customer>();
		store.add(new Customer("Gael Marziou"));
		store.add(new Customer("Pierre Fouche"));
		return store;
	}

	class Customer extends BaseModelData {
		public Customer(String name) {
			super();
			setName(name);
		}

		public void setName(String name) {
			set("name", name);
		}

		public String getName() {
			return get("name");
		}
	}
}