1. #1
    Sencha User
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
    gmarziou is on a distinguished road

      0  

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

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


    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:
    Code:
    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");
    		}
    	}
    }
    Last edited by gmarziou; 6 Oct 2010 at 2:39 PM. Reason: Marked title as solved

  2. #2
    Sencha User
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      1  

    Default


    After
    Code:
    customersTab.add(customersGrid);
    you need to add
    Code:
    customersTab.layout();

  3. #3
    Sencha User
    Join Date
    Jul 2010
    Posts
    11
    Vote Rating
    0
    gmarziou is on a distinguished road

      0  

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

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


    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.

    Code:
    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");
    		}
    	}
    }

Similar Threads

  1. How to call button handler from another button handler function
    By talha06 in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 7 Jun 2010, 9:19 AM
  2. why onclick or handler events lunched at page start?
    By king-greg in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 20 Jan 2010, 5:42 PM
  3. Grid is not created when toolbal handler is called
    By rvent in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 12 Mar 2009, 1:14 PM
  4. can't get onClick event handler to work correctly
    By deeptii in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 5 Nov 2007, 12:06 AM

Thread Participants: 1