Results 1 to 8 of 8

Thread: Tabs height and content display problem

  1. #1
    Ext GWT Premium Member
    Join Date
    Aug 2010
    Location
    Brussels
    Posts
    87

    Default Tabs height and content display problem

    I have some problems using tabs.

    In the following code I need the grid lines to be displayed and to be extended both vertically and horizontally 100%.

    Code:
    import java.util.ArrayList;
    import java.util.List;
    
    import com.extjs.gxt.ui.client.Style.Orientation;
    import com.extjs.gxt.ui.client.data.BaseModel;
    import com.extjs.gxt.ui.client.store.ListStore;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.TabItem;
    import com.extjs.gxt.ui.client.widget.TabPanel;
    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.extjs.gxt.ui.client.widget.layout.RowData;
    import com.extjs.gxt.ui.client.widget.layout.RowLayout;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.rpc.IsSerializable;
    import com.google.gwt.user.client.ui.RootPanel;
    
    public class Test implements EntryPoint {
    
    	public void onModuleLoad() {
    		
    		ContentPanel lc = new ContentPanel();
    		
    		lc.setHeading("Test");
    		
    		lc.setLayout(new RowLayout(Orientation.VERTICAL));
    		lc.setFrame(true);
    		lc.setBodyBorder(false);
    		lc.setBorders(false);
    		
    		TabPanel panel = new TabPanel();  
    	    panel.setHeight("100%");
    	    panel.setBodyBorder(false);
    	    panel.setBorders(false);
    	    
    	    TabItem tabItem = new TabItem("Tab 1");
    	    tabItem.setHeight("100%");
    	    tabItem.setBorders(false);
    	    
    	    final EditorGrid<Translation> grid = createGrid();
    
    	    tabItem.add(grid);
    		
    		panel.add(tabItem);
    		
    	    lc.add(panel, new RowData(1, 1));
    
    		RootPanel.get().add(lc);
    	    
    		prefillData();
    		
    	    lc.layout();
    		
    	}
    
    	private void prefillData() {
    		for (int i=0; i<100; i++) {
    			store.add(new Translation("label", "english", "french", "russian", "spanish", "description"));
    		}
    		
    	}
    
    	protected ListStore<Translation> store;
    	private EditorGrid<Translation> grid;
    	private EditorGrid<Translation> createGrid() {
    		
    		List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
    
    		columns.add(new ColumnConfig(Translation.LABEL, "Label", 60));
    		columns.add(new ColumnConfig(Translation.ENGLISH, "English (original)", 60));
    		columns.add(new ColumnConfig(Translation.FRENCH, "French", 60));
    		columns.add(new ColumnConfig(Translation.RUSSIAN, "Russian", 60));
    		columns.add(new ColumnConfig(Translation.SPANISH, "Spanish", 60));
    
    		store = new ListStore<Translation>();
    
    		ColumnModel cm = new ColumnModel(columns);
    
    		grid = new EditorGrid<Translation>(store, cm);
    		grid.setBorders(true);
    		grid.setStripeRows(true);
    		grid.setAutoExpandColumn(Translation.LABEL);
    		grid.getView().setForceFit(true);
    
    		return grid;
    	}
    	
    	public class Translation extends BaseModel implements IsSerializable {
    
    		private static final long serialVersionUID = 6121348835827555958L;
    
    		public static final String LABEL = "label";
    		public static final String ENGLISH = "english";
    		public static final String FRENCH = "french";
    		public static final String RUSSIAN = "russian";
    		public static final String SPANISH = "spanish";
    		public static final String DESCRIPTION = "description";
    		
    		private Translation(String label, String english, String french, String russian, String spanish, String description) {
    			super();
    			set(LABEL, label);
    			set(ENGLISH, english);
    			set(FRENCH, french);
    			set(RUSSIAN, russian);
    			set(SPANISH, spanish);
    			set(DESCRIPTION, description);
    		}
    
    	}
    
    }

  2. #2
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    Your ContentPanel "lc" is not sized. Also your TabItem has no layout set, so your Grid is not sized:
    Code:
    class Test implements EntryPoint {
    
      public void onModuleLoad() {
    
        ContentPanel lc = new ContentPanel();
    
        lc.setHeading("Test");
    
        lc.setLayout(new RowLayout(Orientation.VERTICAL));
        lc.setFrame(true);
        lc.setBodyBorder(false);
        lc.setBorders(false);
    
        TabPanel panel = new TabPanel();
        panel.setBodyBorder(false);
        panel.setBorders(false);
    
        TabItem tabItem = new TabItem("Tab 1");
        tabItem.setBorders(false);
    
        final EditorGrid<Translation> grid = createGrid();
        tabItem.setLayout(new FitLayout());
        tabItem.add(grid);
    
        panel.add(tabItem);
    
        lc.add(panel, new RowData(1, 1));
    
        Viewport v = new Viewport();
        v.setLayout(new FitLayout());
        v.add(lc);
    
        RootPanel.get().add(v);
    
        prefillData();
      }
    
      private void prefillData() {
        for (int i = 0; i < 100; i++) {
          store.add(new Translation("label", "english", "french", "russian", "spanish", "description"));
        }
    
      }
    
      protected ListStore<Translation> store;
      private EditorGrid<Translation> grid;
    
      private EditorGrid<Translation> createGrid() {
    
        List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
    
        columns.add(new ColumnConfig(Translation.LABEL, "Label", 60));
        columns.add(new ColumnConfig(Translation.ENGLISH, "English (original)", 60));
        columns.add(new ColumnConfig(Translation.FRENCH, "French", 60));
        columns.add(new ColumnConfig(Translation.RUSSIAN, "Russian", 60));
        columns.add(new ColumnConfig(Translation.SPANISH, "Spanish", 60));
    
        store = new ListStore<Translation>();
    
        ColumnModel cm = new ColumnModel(columns);
    
        grid = new EditorGrid<Translation>(store, cm);
        grid.setBorders(true);
        grid.setStripeRows(true);
        grid.setAutoExpandColumn(Translation.LABEL);
        grid.getView().setForceFit(true);
    
        return grid;
      }
    
      public class Translation extends BaseModel implements IsSerializable {
    
        private static final long serialVersionUID = 6121348835827555958L;
    
        public static final String LABEL = "label";
        public static final String ENGLISH = "english";
        public static final String FRENCH = "french";
        public static final String RUSSIAN = "russian";
        public static final String SPANISH = "spanish";
        public static final String DESCRIPTION = "description";
    
        private Translation(String label, String english, String french, String russian, String spanish, String description) {
          super();
          set(LABEL, label);
          set(ENGLISH, english);
          set(FRENCH, french);
          set(RUSSIAN, russian);
          set(SPANISH, spanish);
          set(DESCRIPTION, description);
        }
    
      }
    
    }

  3. #3
    Ext GWT Premium Member
    Join Date
    Aug 2010
    Location
    Brussels
    Posts
    87

    Default

    Still problems. See the changed code. Probably there is another tiny details which makes difference and which I don't see.

    Code:
    package com.accelior.test.client;
    
    import java.util.ArrayList;
    import java.util.List;
    
    import com.extjs.gxt.ui.client.Style.Orientation;
    import com.extjs.gxt.ui.client.data.BaseModel;
    import com.extjs.gxt.ui.client.store.ListStore;
    import com.extjs.gxt.ui.client.widget.ContentPanel;
    import com.extjs.gxt.ui.client.widget.TabItem;
    import com.extjs.gxt.ui.client.widget.TabPanel;
    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.extjs.gxt.ui.client.widget.layout.RowData;
    import com.extjs.gxt.ui.client.widget.layout.RowLayout;
    import com.google.gwt.core.client.EntryPoint;
    import com.google.gwt.user.client.rpc.IsSerializable;
    import com.google.gwt.user.client.ui.RootPanel;
    
    public class Test implements EntryPoint {
    
    	public void onModuleLoad() {
    		
    		ContentPanel lc = new ContentPanel();
    		
    		lc.setSize("100%", "100%");
    		
    		lc.setHeading("Test");
    		
    		lc.setLayout(new RowLayout(Orientation.VERTICAL));
    		lc.setFrame(true);
    		lc.setBodyBorder(false);
    		lc.setBorders(false);
    		
    		TabPanel panel = new TabPanel();  
    	    panel.setHeight("100%");
    	    panel.setBodyBorder(false);
    	    panel.setBorders(false);
    	    
    	    TabItem tabItem = new TabItem("Tab 1");
    	    tabItem.setHeight("100%");
    	    tabItem.setBorders(false);
    	    tabItem.setLayout(new FitLayout());
    	    
    	    final Grid<Translation> grid = createGrid();
    
    	    tabItem.add(grid);
    		
    		panel.add(tabItem);
    		
    	    lc.add(panel, new RowData(1, 1));
    
    		RootPanel.get().add(lc);
    	    
    		prefillData();
    		
    	    lc.layout();
    		
    	}
    
    	private void prefillData() {
    		for (int i=0; i<100; i++) {
    			store.add(new Translation("label", "english", "french", "russian", "spanish", "description"));
    		}
    		
    	}
    
    	protected ListStore<Translation> store;
    	private Grid<Translation> grid;
    	private Grid<Translation> createGrid() {
    		
    		List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
    
    		columns.add(new ColumnConfig(Translation.LABEL, "Label", 60));
    		columns.add(new ColumnConfig(Translation.ENGLISH, "English (original)", 60));
    		columns.add(new ColumnConfig(Translation.FRENCH, "French", 60));
    		columns.add(new ColumnConfig(Translation.RUSSIAN, "Russian", 60));
    		columns.add(new ColumnConfig(Translation.SPANISH, "Spanish", 60));
    
    		store = new ListStore<Translation>();
    
    		ColumnModel cm = new ColumnModel(columns);
    
    		grid = new Grid<Translation>(store, cm);
    		grid.setBorders(true);
    		grid.setStripeRows(true);
    		grid.setAutoExpandColumn(Translation.LABEL);
    		grid.getView().setForceFit(true);
    
    		return grid;
    	}
    	
    	public class Translation extends BaseModel implements IsSerializable {
    
    		private static final long serialVersionUID = 6121348835827555958L;
    
    		public static final String LABEL = "label";
    		public static final String ENGLISH = "english";
    		public static final String FRENCH = "french";
    		public static final String RUSSIAN = "russian";
    		public static final String SPANISH = "spanish";
    		public static final String DESCRIPTION = "description";
    		
    		private Translation(String label, String english, String french, String russian, String spanish, String description) {
    			super();
    			set(LABEL, label);
    			set(ENGLISH, english);
    			set(FRENCH, french);
    			set(RUSSIAN, russian);
    			set(SPANISH, spanish);
    			set(DESCRIPTION, description);
    		}
    
    	}
    
    }

  4. #4
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    Percentages sizes dont work. If you want something to fit the hole browser, you need to use a Viewport as i did.

  5. #5
    Ext GWT Premium Member
    Join Date
    Aug 2010
    Location
    Brussels
    Posts
    87

    Default

    The problem is really driving me crazy. The extracted version of my real code is the following (and it works fine)

    Code:
    class Test implements EntryPoint {
    
    	public void onModuleLoad() {
    		
    		Viewport vp = new Viewport();
    		
    		vp.setLayout(new FitLayout());
    		
    		LayoutContainer lc = new LayoutContainer();
    		
    		BorderLayout borderLayout = new BorderLayout();
    		lc.setLayout(borderLayout);
    		
    		BorderLayoutData center = new BorderLayoutData(LayoutRegion.CENTER);
    		center.setMargins(new Margins(0));
    		
    		LayoutContainer centerContent = new LayoutContainer();
    		centerContent.setLayout(new FitLayout());
    		centerContent.setStyleAttribute("background-color", "#FFFFFF");
    		
    		lc.add(centerContent, center);
    		
    		vp.add(lc);
    		
    		ContentPanel contentContainer = new ContentPanel();
    		
    		contentContainer.setHeading("Test");
    		
    		contentContainer.setLayout(new RowLayout(Orientation.VERTICAL));
    		contentContainer.setFrame(true);
    		contentContainer.setBodyBorder(false);
    		contentContainer.setBorders(false);
    		
    		TabPanel panel = new TabPanel(); 
    	    panel.setBodyBorder(true);
    	    panel.setBorders(true);
    	    
    	    TabItem tab = new TabItem("My tab");
    	    
    	    tab.setLayout(new FitLayout());
    	    tab.setBorders(true);
    		
    		store = new ListStore<Translation>();
    	    store.setMonitorChanges(true);
    		
    		grid = createGrid();
    	    grid.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);
    		
    	    tab.add(grid);
    	    
    		panel.add(tab);
    	    
    	    contentContainer.add(panel, new RowData(1, 1));
    		
    		centerContent.add(contentContainer);
    		centerContent.layout();
    		
    		RootPanel.get().add(vp);
    
    		prefillData();
    	}
    
    	private void prefillData() {
    		for (int i = 0; i < 100; i++) {
    			store.add(new Translation("label", "english", "french", "russian", "spanish", "description"));
    		}
    
    	}
    
    	protected ListStore<Translation> store;
    	private EditorGrid<Translation> grid;
    
    	private EditorGrid<Translation> createGrid() {
    
    		List<ColumnConfig> columns = new ArrayList<ColumnConfig>();
    
    		columns.add(new ColumnConfig(Translation.LABEL, "Label", 60));
    		columns.add(new ColumnConfig(Translation.ENGLISH, "English (original)", 60));
    		columns.add(new ColumnConfig(Translation.FRENCH, "French", 60));
    		columns.add(new ColumnConfig(Translation.RUSSIAN, "Russian", 60));
    		columns.add(new ColumnConfig(Translation.SPANISH, "Spanish", 60));
    
    		store = new ListStore<Translation>();
    
    		ColumnModel cm = new ColumnModel(columns);
    
    		grid = new EditorGrid<Translation>(store, cm);
    		grid.setBorders(true);
    		grid.setStripeRows(true);
    		grid.setAutoExpandColumn(Translation.LABEL);
    		grid.getView().setForceFit(true);
    
    		return grid;
    	}
    
    	public class Translation extends BaseModel implements IsSerializable {
    
    		private static final long serialVersionUID = 6121348835827555958L;
    
    		public static final String LABEL = "label";
    		public static final String ENGLISH = "english";
    		public static final String FRENCH = "french";
    		public static final String RUSSIAN = "russian";
    		public static final String SPANISH = "spanish";
    		public static final String DESCRIPTION = "description";
    
    		private Translation(String label, String english, String french, String russian, String spanish,
    				String description) {
    			super();
    			set(LABEL, label);
    			set(ENGLISH, english);
    			set(FRENCH, french);
    			set(RUSSIAN, russian);
    			set(SPANISH, spanish);
    			set(DESCRIPTION, description);
    		}
    
    	}
    
    }

    But in the real case scenario I load tab's grid data on triggering an outer container display event (not GXT event, but generally speaking) and like this grid is not extended vertically. In the code you see everything works fine, and I have exactly the same structure, I even managed to have it working fine without playing with data.

  6. #6
    Sencha Premium Member
    Join Date
    Sep 2007
    Posts
    13,976

    Default

    There will be something that is different when it works fine in your testcase and not in your app. You can open a ticket in the ticket system and schedule a remote desktop session (if included in your support subscription). Than we can debug your real code.

  7. #7
    Ext GWT Premium Member
    Join Date
    Aug 2010
    Location
    Brussels
    Posts
    87

    Default

    I will try myself more It's a bit expensive

  8. #8
    Ext GWT Premium Member
    Join Date
    Aug 2010
    Location
    Brussels
    Posts
    87

    Default

    Found it... it was an extra element that when added to the TabItem was breaking the whole thing.

    Thanks for help, it was useful!

Similar Threads

  1. tabpanel height problem/content scrolling past bottom
    By smokeman in forum Sencha Ext JS Q&A
    Replies: 12
    Last Post: 6 Jan 2010, 7:44 AM
  2. [SOLVED] Other tabs do not display items content
    By catmd2b in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 26 Sep 2008, 6:50 AM
  3. Problem changing accordion tabs height w/o a doctype
    By salvo in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 29 Jul 2008, 2:27 AM
  4. problem calling dyamic content in tabs
    By srihari_tulasi in forum Ext 1.x: Help & Discussion
    Replies: 11
    Last Post: 1 Feb 2007, 3:56 AM
  5. content panel tabs resulting in unexpected display issues
    By sjivan in forum Ext 1.x: Help & Discussion
    Replies: 7
    Last Post: 27 Nov 2006, 6:19 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •