Setting Top Components in Windows

[Speedbird]

I have a Window with BorderLayout. The window contains a LayoutContainer placed at LayoutRegion west and a further one placed at LayoutRegion Center. A third Layoutcontainer is set as top component of the window containing a menubar and a toolbar.

If I set the top component in the constructor of the window, the bottom of the Window is not painted correctly. The height of the missing part equals to the height of the top component. If I resize the window the missing part appears. SetLayoutOnChange is set to true.

If I set the top component in the onRender method I get the following Exception:

com.google.gwt.core.client.JavaScriptException: (TypeError): 'parentElement' is null or not an object
number: -2146823281
description: 'parentElement' is null or not an object
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:443)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeObject(ModuleSpace.java:215)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeObject(JavaScriptHost.java:91)
at com.google.gwt.dom.client.Element$.getParentElement$(Element.java:181)
at com.google.gwt.user.client.DOM.getParent(DOM.java:885)
at com.extjs.gxt.ui.client.widget.Component.onAttach(Component.java:1130)
at com.extjs.gxt.ui.client.widget.Container.onAttach(Container.java:348)
at com.extjs.gxt.ui.client.widget.ContentPanel.doAttachChildren(ContentPanel.java:688)
at com.google.gwt.user.client.ui.Widget.onAttach(Widget.java:111)
at com.extjs.gxt.ui.client.widget.Component.onAttach(Component.java:1141)


How can I solve the problem?

[darrellmeyer]

You need to post some test code in this format (http://extjs.com/forum/showthread.php?t=33778).

[Speedbird]

Here is the test code. I

[Speedbird]

Hello again,

does anyone have presumptions or proposals for Solution?

[darrellmeyer]

setTopComponent needs to be called before rendering. If you move the call to the windows constructor the code works fine.

The method was missing the assert call that throws a runtime exception if called after rendering. That has been fixed.

[Speedbird]

Hello Darrell,

as described above, if I move setTopComponent to the constructor, the bottom of the window is missing. I have to resize the window manually to get it completely visible.

Please try the following modified code example. Relevant code is commented:

public class WindowTest extends ContentPanel implements EntryPoint {
private LayoutContainer topContainer;
private Window internalWindow;
private ToolBar searchbar;
private TabPanel tabPanel;
private ContentPanel treePanel;
public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.setLayout(new BorderLayout());
viewport.add(this);
RootPanel.get().add(viewport);

// show Window
getInternalWindow().show();
}
public WindowTest() {
super();
setFrame(true);
setBorders(true);
setHeaderVisible(true);
setHeading("TestApp");
setLayout(new FitLayout());
BorderLayoutData data = new BorderLayoutData(LayoutRegion.CENTER);
data.setMargins(new Margins(5, 5, 5, 0));
setLayoutData(data);
}
public Window getInternalWindow() {
if (internalWindow == null) {
internalWindow = new InternalWindow();

// **** CUTS BOTTOM OF WINDOW ****
// internalWindow.setTopComponent(getTopContainer());

internalWindow.setLayoutOnChange(true);
}
return internalWindow;
}
public LayoutContainer getTopContainer() {
if (topContainer == null) {
topContainer = new LayoutContainer();
topContainer.add(createMenuBar());
topContainer.add(getSearchBar());
topContainer.layout();
}
return topContainer;
}
private ContentPanel createDataPanel() {
ContentPanel pnlPosData = new ContentPanel();
pnlPosData.setLayout(new FitLayout());
pnlPosData.setHeaderVisible(false);
pnlPosData.setAutoWidth(true);
pnlPosData.add(getTabPanel());
return pnlPosData;
}
TabPanel getTabPanel() {
if (tabPanel == null) {
tabPanel = new TabPanel();
tabPanel.add(new TabItem("Test1"));
tabPanel.add(new TabItem("Test2"));
}
return tabPanel;
}
private ToolBar createMenuBar() {
ToolBar toolBar = new ToolBar();
TextToolItem menu1 = new TextToolItem("Menu1");
TextToolItem menu2 = new TextToolItem("Menu2");
TextToolItem menu3 = new TextToolItem("Menu3");
toolBar.add(menu1);
toolBar.add(menu2);
toolBar.add(menu3);
return toolBar;
}
private ToolBar getSearchBar() {
if (searchbar == null) {
searchbar = new ToolBar();
AdapterToolItem tiLblSuche = new AdapterToolItem(new Label(
"Search:"));
searchbar.add(tiLblSuche);
TextField tfSuche = new TextField();
tfSuche.setWidth(540);
AdapterToolItem tiTfSuche = new AdapterToolItem(tfSuche);
searchbar.add(tiTfSuche);
}
return searchbar;
}
ContentPanel getTreePanel() {
if (treePanel == null) {
treePanel = new ContentPanel();
treePanel.setHeaderVisible(false);
}
return treePanel;
}

private class InternalWindow extends Window {

public InternalWindow() {
super();

// **** CUTS BOTTOM OF WINDOW ****
// setTopComponent(getTopContainer());
}

protected void onRender(Element parent, int pos) {
super.onRender(parent, pos);

internalWindow.setLayout(new BorderLayout());

setTopComponent(getTopContainer()); // Causes Exception !!!

setHeight(500);
setInitialWidth(800);
setBorders(true);
setHeaderVisible(true);
setHeading("Window"); //$NON-NLS-1$
ContentPanel pnlData = createDataPanel();
BorderLayoutData westData = new BorderLayoutData(
LayoutRegion.WEST);
westData.setSplit(true);
westData.setMargins(new Margins(5, 5, 5, 0));
BorderLayoutData centerData = new BorderLayoutData(
LayoutRegion.CENTER);
centerData.setMargins(new Margins(5, 0, 5, 0));
add(getTreePanel(), westData);
add(pnlData, centerData);

}
}
}


I

[darrellmeyer]

Take a look at the modified code:

public class Test extends ContentPanel implements EntryPoint {
private LayoutContainer topContainer;
private Window internalWindow;
private ToolBar searchbar;
private TabPanel tabPanel;
private ContentPanel treePanel;

public void onModuleLoad() {
Viewport viewport = new Viewport();
viewport.setLayout(new BorderLayout());
viewport.add(this);
RootPanel.get().add(viewport);

// show Window
getInternalWindow().show();
}

public Test() {
super();
setFrame(true);
setBorders(true);
setHeaderVisible(true);
setHeading("TestApp");
setLayout(new FitLayout());
BorderLayoutData data = new BorderLayoutData(LayoutRegion.CENTER);
data.setMargins(new Margins(5, 5, 5, 0));
setLayoutData(data);
}

public Window getInternalWindow() {
if (internalWindow == null) {
internalWindow = new InternalWindow();

// **** CUTS BOTTOM OF WINDOW ****
// internalWindow.setTopComponent(getTopContainer());

internalWindow.setLayoutOnChange(true);
}
return internalWindow;
}

public LayoutContainer getTopContainer() {
if (topContainer == null) {
topContainer = new LayoutContainer();
topContainer.setHeight(50);
topContainer.add(createMenuBar());
topContainer.add(getSearchBar());
}
return topContainer;
}

private ContentPanel createDataPanel() {
ContentPanel pnlPosData = new ContentPanel();
pnlPosData.setLayout(new FitLayout());
pnlPosData.setHeaderVisible(false);
// pnlPosData.setAutoWidth(true);
pnlPosData.add(getTabPanel());
return pnlPosData;
}

TabPanel getTabPanel() {
if (tabPanel == null) {
tabPanel = new TabPanel();
tabPanel.add(new TabItem("Test1"));
tabPanel.add(new TabItem("Test2"));
}
return tabPanel;
}

private ToolBar createMenuBar() {
ToolBar toolBar = new ToolBar();
TextToolItem menu1 = new TextToolItem("Menu1");
TextToolItem menu2 = new TextToolItem("Menu2");
TextToolItem menu3 = new TextToolItem("Menu3");
toolBar.add(menu1);
toolBar.add(menu2);
toolBar.add(menu3);
return toolBar;
}

private ToolBar getSearchBar() {
if (searchbar == null) {
searchbar = new ToolBar();
AdapterToolItem tiLblSuche = new AdapterToolItem(new Label("Search:"));
searchbar.add(tiLblSuche);
TextField tfSuche = new TextField();
tfSuche.setWidth(540);
AdapterToolItem tiTfSuche = new AdapterToolItem(tfSuche);
searchbar.add(tiTfSuche);
}
return searchbar;
}

ContentPanel getTreePanel() {
if (treePanel == null) {
treePanel = new ContentPanel();
treePanel.setHeaderVisible(false);
}
return treePanel;
}

private class InternalWindow extends Window {

public InternalWindow() {
super();

// **** CUTS BOTTOM OF WINDOW ****
// setTopComponent(getTopContainer());

setLayout(new BorderLayout());

setTopComponent(getTopContainer()); // Causes Exception !!!

setHeight(500);
setInitialWidth(800);
setBorders(true);
setHeaderVisible(true);
setHeading("Window"); //$NON-NLS-1$
ContentPanel pnlData = createDataPanel();
BorderLayoutData westData = new BorderLayoutData(LayoutRegion.WEST);
westData.setSplit(true);
westData.setMargins(new Margins(5, 5, 5, 0));
BorderLayoutData centerData = new BorderLayoutData(LayoutRegion.CENTER);
centerData.setMargins(new Margins(5, 0, 5, 0));
add(getTreePanel(), westData);
add(pnlData, centerData);
}

}
}

[Speedbird]

That solved it! Thank you.