how to default a border layout panel as collapsed

[jhudson888]

Hi,

This is a really silly question but with 2.0-m1, I can't figure out how to add a panel to a ContentPanel with a BorderPanelLayout that has an initial state of collapsed. Can anybody help me with this? Thank you very much.

I have onRender code like this:

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

        layout.collapse(LayoutRegion.SOUTH);
    }

And, this is the error that I get:

java.lang.AssertionError: Method must be called after the component is rendered
at com.extjs.gxt.ui.client.widget.Component.assertAfterRender(Component.java:1273)
at com.extjs.gxt.ui.client.widget.Component.el(Component.java:404)
at com.extjs.gxt.ui.client.widget.layout.BorderLayout.getRegionWidget(BorderLayout.java:396)
at com.extjs.gxt.ui.client.widget.layout.BorderLayout.collapse(BorderLayout.java:121)

[jeremy.wick]

Hope this can help, i managed to do this in GWT-Ext by setting the region panel to collapsed using

panel.collapse()

after adding it to the container with border layout.

[gelgey]

This is a really silly question but with 2.0-m1, I can't figure out how to add a panel to a ContentPanel with a BorderPanelLayout that has an initial state of collapsed.

I have the same problem with GXT 1.5.4 -- I have a BorderLayout with two panels: EAST and CENTER, and I want the EAST panel to be collapsed initially.

public void onModuleLoad() {
  Viewport viewport = new Viewport();
  viewport.setLayout(new FitLayout());
  viewport.add(createContainer());
  RootPanel.get().add(viewport);
}

private LayoutContainer createContainer() {
  ContentPanel east = new ContentPanel();
  east.addText("east");
  ContentPanel center = new ContentPanel();
  center.addText("center");
  final BorderLayout layout = new BorderLayout();
  LayoutContainer container = new LayoutContainer() {
    @Override protected void afterRender() {
      super.afterRender();
      layout.collapse(LayoutRegion.EAST);
    }
  };
  container.setLayout(layout);
  container.add(east, new BorderLayoutData(LayoutRegion.EAST, 100) {{
    this.setCollapsible(true);
  }});
  container.add(center, new BorderLayoutData(LayoutRegion.CENTER));
  return container;
}

Here I add two panels to the border layout, and after the parent container has been rendered I try to collapse one panel, but I get the following error:

java.lang.AssertionError: Method must be called after the component is rendered
at com.extjs.gxt.ui.client.widget.Component.assertAfterRender(Component.java:1224)
at com.extjs.gxt.ui.client.widget.Component.el(Component.java:392)
at com.extjs.gxt.ui.client.widget.layout.BorderLayout.getRegionWidget(BorderLayout.java:397)
at com.extjs.gxt.ui.client.widget.layout.BorderLayout.collapse(BorderLayout.java:123)
at com.quest.bullseye.client.Application$1.afterRender(Application.java:37)

So the parent container has been rendered, but the the child components in its layout have not been rendered?

[The_Jackal]

Try this - set the initial state of the panel to collapsed when you create it and then add it to the border layout

msgPanel.getState().put("collapsed", true);
msgPanel.saveState();

I'm having an issue with setting a layout region to hidden and then trying to show it later.

I get a similar error at a different place...

java.lang.AssertionError: Method must be called after the component is rendered
at com.extjs.gxt.ui.client.widget.Component.assertAfterRender(Component.java:1224)
at com.extjs.gxt.ui.client.widget.Component.el(Component.java:392)
at com.extjs.gxt.ui.client.widget.SplitBar$2.handleEvent(SplitBar.java:116)
at com.extjs.gxt.ui.client.widget.SplitBar$2.handleEvent(SplitBar.java:1)
at com.extjs.gxt.ui.client.widget.SplitBar.<init>(SplitBar.java:173)
at com.extjs.gxt.ui.client.widget.layout.BorderLayout.createSplitBar(BorderLayout.java:190)
at com.extjs.gxt.ui.client.widget.layout.BorderLayout.initSplitBar(BorderLayout.java:449)
at com.extjs.gxt.ui.client.widget.layout.BorderLayout.onLayout(BorderLayout.java:319)
at com.extjs.gxt.ui.client.widget.Layout.layout(Layout.java:93)
at com.extjs.gxt.ui.client.widget.layout.BorderLayout.show(BorderLayout.java:185)

[Luming Lai]

You have to stick the collapse() call in a DeferredCommand, that's how we did it.

But yes, I agree, it's silly that you can't provide a default before render, we're wasting perfectly good CPU time to do this.

[balazm]

I had a similar problem and I managed to make the required LayoutRegion default collapsed like this:

public class MyLayoutContainer extends LayoutContainer {

    protected BorderLayout borderLayout;

    public MyLayoutContainer() {
        borderLayout = new BorderLayout();
    }
    
    @Override
    protected void onRender(Element parent, int index) {
        super.onRender(parent, index);
        setLayout(borderLayout);
        final BorderLayoutData northData = new BorderLayoutData(LayoutRegion.NORTH);
        northData.setCollapsible(true);
        north = new ContentPanel();
        add(north, northData);
    }

    public void collapseRegion(LayoutRegion region){
        borderLayout.collapse(region);
    }

}

public class MyWindow extends Window {
    private MyLayoutContainer layoutContainer;
    public MyWindow() {
        layoutContainer = new MyLayoutContainer();
        add(layoutContainer);
    }

    @Override
    protected void onShow() {
        super.onShow();
        layoutContainer.collapseRegion(LayoutRegion.NORTH);
    }
}

public class Example implements EntryPoint {

    public void onModuleLoad() {
    
        MyWindow window = new MyWindow();
        window.show();
    }
}

I'm not sure if it is the best solution but I hope it helps someone.

[The_Jackal]

You have to stick the collapse() call in a DeferredCommand, that's how we did it.

I found this was "flashing" the panel (showing and then hiding it) and also that when you pop out a collapsed panel (clicking on the collapsed section) the popup was empty as panel was still effectively collapsed. Instead I used a once only AfterLayout event listener.

layoutContainer.addListener(Events.AfterLayout, new Listener<ComponentEvent>() {
  public void handleEvent(ComponentEvent be) {
    borderLayout.collapse(LayoutRegion.WEST);
    be.getComponent().removeListener(Events.AfterLayout, this);
  }
});

Using this method some child components may have trouble rendering inside the collapsed panel. One such component is a TreePanel - if you add it and then call expandAll() it will throw a JavaScriptException, caused by the parent of the collapsed panel being null.

com.google.gwt.core.client.JavaScriptException: (TypeError): this.appendChild is not a function

To counter this I added a once only Attach event listener to the panel that will be collapsed:

myContentPanel.addListener(Events.Attach, new Listener<ComponentEvent>() {
  public void handleEvent(ComponentEvent ce) {
    myTreePanel.expandAll();
    // Remove this listener - expand only once
    ce.getComponent().removeListener(Events.Attach, this);
  }
});