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
    Software Architect
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi