PDA

View Full Version : [CLOSED] button on bottom of form partially visible until resize



cri1258
6 May 2009, 10:54 AM
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
6 May 2009, 11:07 AM
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
6 May 2009, 11:17 AM
I've tried calling layout() all over the place so far with no success. what should I call layout() on? Thanks, Thanks, Thanks.......

cri1258
6 May 2009, 11:40 AM
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
6 May 2009, 11:44 AM
You have to add that one you are hiding.

cri1258
6 May 2009, 12:08 PM
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
6 May 2009, 12:09 PM
You are missing a layoutcall after adding the panel.

cri1258
6 May 2009, 12:16 PM
Beautiful! Yes, that worked, i.e. calling "viewport.layout()" after adding the component, both in my test case and in my code. Thanks!