[CLOSED] button on bottom of form partially visible until resize

[cri1258]

Versions:
GXT 1.2.4
GWT 1.5.3

Both web and hosted mode.

A button on the bottom of a form previously hidden is only partially visible at the bottom of its parent viewport. Re-sizing the browser corrects problem.

I've been struggling to find a coding workaround using layout() but haven't been successful. Some assistance would be greatly, greatly appreciated. I'm embarrassed to say I've been working on fixing this for over two days. :((:">

This following code duplicates the problem:



package com.embarq.basicgxtapp.client;

import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
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.ui.RootPanel;

public class BasicGXTApp implements EntryPoint {

private TabPanel toplevelTabPanel;

public void onModuleLoad() {

Viewport viewport = new Viewport();
viewport.setLayout(new RowLayout());
Button viewportShowButton = new Button("viewportShowButton",new SelectionListener<ComponentEvent>() {
public void componentSelected(ComponentEvent ce) {
toplevelTabPanel.show();
}
});
viewport.add(viewportShowButton);

toplevelTabPanel = new TabPanel();

TabItem topTabItem1 = new TabItem("TopTabItem1");
topTabItem1.setIconStyle("tree-folder-open");
topTabItem1.setLayout(new FillLayout(Orientation.VERTICAL));

toplevelTabPanel.add(topTabItem1);

TabItem topTabItem2 = new TabItem("TopTabItem2");

topTabItem2.setIconStyle("tree-folder-open");
topTabItem2.setLayout(new FillLayout(Orientation.VERTICAL));

TabPanel topTabItem2SubPanel = new TabPanel();

topTabItem2.add(topTabItem2SubPanel);

TabItem topTabItem2SubPanelTabItem1 = new TabItem("topTabItem2SubPanelTabItem1");
topTabItem2SubPanelTabItem1.setIconStyle("tree-folder-open");
topTabItem2SubPanelTabItem1.setLayout(new FillLayout(Orientation.VERTICAL));

LayoutContainer topTabItem2SubPanelTabItem1GUI = new LayoutContainer();
topTabItem2SubPanelTabItem1GUI.setLayout(new FitLayout());

FormPanel topTabItem2SubPanelTabItem1GUIForm = new FormPanel();
topTabItem2SubPanelTabItem1GUIForm.setHeading("topTabItem2SubPanelTabItem1GUIForm");
topTabItem2SubPanelTabItem1GUIForm.setFrame(true);

Button topTabItem2SubPanelTabItem1GUIFormButton = new Button("topTabItem2SubPanelTabItem1GUIFormButton");

topTabItem2SubPanelTabItem1GUIForm.addButton(topTabItem2SubPanelTabItem1GUIFormButton);

topTabItem2SubPanelTabItem1.add(topTabItem2SubPanelTabItem1GUIForm);

topTabItem2SubPanel.add(topTabItem2SubPanelTabItem1);

toplevelTabPanel.add(topTabItem2);
viewport.add(toplevelTabPanel, new RowData(1, 1));
toplevelTabPanel.hide();

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

[sven]

You are hiding items and showing them again. So two solutions. Call layout after show or dont add the initial hidden panel and add it where you want to show it.

I suggest the second one.

[cri1258]

I've tried calling layout() all over the place so far with no success. what should I call layout() on? Thanks, Thanks, Thanks.......

[cri1258]

Since you suggested adding the tab item dynamically, instead of using hide/show, I modified the originally posted code to do the former (see below). Same problem. Maybe I'm not understanding.


package com.embarq.basicgxtapp.client;

import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
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.ui.RootPanel;

public class BasicGXTApp implements EntryPoint {

private TabPanel toplevelTabPanel;
private Viewport viewport;
private TabItem topTabItem2;

public void onModuleLoad() {

viewport = new Viewport();
viewport.setLayout(new RowLayout());

topTabItem2 = new TabItem("TopTabItem2");

Button viewportShowButton = new Button("viewportShowButton",new SelectionListener<ComponentEvent>() {
public void componentSelected(ComponentEvent ce) {
toplevelTabPanel.show();
toplevelTabPanel.add(topTabItem2);
}
});
viewport.add(viewportShowButton);

toplevelTabPanel = new TabPanel();

TabItem topTabItem1 = new TabItem("TopTabItem1");
topTabItem1.setIconStyle("tree-folder-open");
topTabItem1.setLayout(new FillLayout(Orientation.VERTICAL));

toplevelTabPanel.add(topTabItem1);

topTabItem2.setIconStyle("tree-folder-open");
topTabItem2.setLayout(new FillLayout(Orientation.VERTICAL));

TabPanel topTabItem2SubPanel = new TabPanel();

topTabItem2.add(topTabItem2SubPanel);

TabItem topTabItem2SubPanelTabItem1 = new TabItem("topTabItem2SubPanelTabItem1");
topTabItem2SubPanelTabItem1.setIconStyle("tree-folder-open");
topTabItem2SubPanelTabItem1.setLayout(new FillLayout(Orientation.VERTICAL));

LayoutContainer topTabItem2SubPanelTabItem1GUI = new LayoutContainer();
topTabItem2SubPanelTabItem1GUI.setLayout(new FitLayout());

FormPanel topTabItem2SubPanelTabItem1GUIForm = new FormPanel();
topTabItem2SubPanelTabItem1GUIForm.setHeading("topTabItem2SubPanelTabItem1GUIForm");
topTabItem2SubPanelTabItem1GUIForm.setFrame(true);

Button topTabItem2SubPanelTabItem1GUIFormButton = new Button("topTabItem2SubPanelTabItem1GUIFormButton");

topTabItem2SubPanelTabItem1GUIForm.addButton(topTabItem2SubPanelTabItem1GUIFormButton);

topTabItem2SubPanelTabItem1.add(topTabItem2SubPanelTabItem1GUIForm);

topTabItem2SubPanel.add(topTabItem2SubPanelTabItem1);

viewport.add(toplevelTabPanel, new RowData(1, 1));
toplevelTabPanel.hide();

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

[sven]

You have to add that one you are hiding.

[cri1258]

Well, still plugging away. Did as you suggested (I think anyway). This time, after I push the button that adds the tab panel, the tab panel doesn't appear:


package com.embarq.basicgxtapp.client;

import com.extjs.gxt.ui.client.Style.Orientation;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.TabItem;
import com.extjs.gxt.ui.client.widget.TabPanel;
import com.extjs.gxt.ui.client.widget.Viewport;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.layout.FillLayout;
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.ui.RootPanel;

public class BasicGXTApp implements EntryPoint {

private TabPanel toplevelTabPanel;
private Viewport viewport;

public void onModuleLoad() {

viewport = new Viewport();
viewport.setLayout(new RowLayout());

Button viewportShowButton = new Button("viewportShowButton",new SelectionListener<ComponentEvent>() {
public void componentSelected(ComponentEvent ce) {
viewport.add(toplevelTabPanel, new RowData(1, 1));
}
});
viewport.add(viewportShowButton);

toplevelTabPanel = new TabPanel();

TabItem topTabItem1 = new TabItem("TopTabItem1");
topTabItem1.setIconStyle("tree-folder-open");
topTabItem1.setLayout(new FillLayout(Orientation.VERTICAL));

toplevelTabPanel.add(topTabItem1);

TabItem topTabItem2 = new TabItem("TopTabItem2");

topTabItem2.setIconStyle("tree-folder-open");
topTabItem2.setLayout(new FillLayout(Orientation.VERTICAL));

TabPanel topTabItem2SubPanel = new TabPanel();

topTabItem2.add(topTabItem2SubPanel);

TabItem topTabItem2SubPanelTabItem1 = new TabItem("topTabItem2SubPanelTabItem1");
topTabItem2SubPanelTabItem1.setIconStyle("tree-folder-open");
topTabItem2SubPanelTabItem1.setLayout(new FillLayout(Orientation.VERTICAL));

LayoutContainer topTabItem2SubPanelTabItem1GUI = new LayoutContainer();
topTabItem2SubPanelTabItem1GUI.setLayout(new FitLayout());

FormPanel topTabItem2SubPanelTabItem1GUIForm = new FormPanel();
topTabItem2SubPanelTabItem1GUIForm.setHeading("topTabItem2SubPanelTabItem1GUIForm");
topTabItem2SubPanelTabItem1GUIForm.setFrame(true);

Button topTabItem2SubPanelTabItem1GUIFormButton = new Button("topTabItem2SubPanelTabItem1GUIFormButton");

topTabItem2SubPanelTabItem1GUIForm.addButton(topTabItem2SubPanelTabItem1GUIFormButton);

topTabItem2SubPanelTabItem1.add(topTabItem2SubPanelTabItem1GUIForm);

topTabItem2SubPanel.add(topTabItem2SubPanelTabItem1);

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

[sven]

You are missing a layoutcall after adding the panel.

[cri1258]

Beautiful! Yes, that worked, i.e. calling "viewport.layout()" after adding the component, both in my test case and in my code. Thanks!