1. #1
    Ext User
    Join Date
    Apr 2009
    Posts
    41
    Vote Rating
    0
    jhudson888 is on a distinguished road

      0  

    Default how to default a border layout panel as collapsed

    how to default a border layout panel as collapsed


    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:


    Code:
        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)

  2. #2
    Ext User
    Join Date
    Apr 2009
    Posts
    1
    Vote Rating
    0
    jeremy.wick is on a distinguished road

      0  

    Default


    Hope this can help, i managed to do this in GWT-Ext by setting the region panel to collapsed using
    Code:
    panel.collapse()
    after adding it to the container with border layout.

  3. #3
    Ext GWT Premium Member
    Join Date
    Dec 2008
    Location
    Brisbane, Australia
    Posts
    69
    Vote Rating
    0
    gelgey is on a distinguished road

      0  

    Default


    Quote Originally Posted by jhudson888 View Post
    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.

    Code:
    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?

  4. #4
    Ext GWT Premium Member
    Join Date
    Mar 2009
    Posts
    226
    Vote Rating
    3
    The_Jackal is on a distinguished road

      0  

    Default


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

    Code:
    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)

  5. #5
    Ext User
    Join Date
    Oct 2008
    Posts
    40
    Vote Rating
    0
    Luming Lai is on a distinguished road

      0  

    Default


    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.

  6. #6
    Ext User
    Join Date
    Sep 2009
    Posts
    4
    Vote Rating
    0
    balazm is on a distinguished road

      0  

    Default


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

    Code:
    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);
        }
    
    }
    Code:
    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);
        }
    }
    Code:
    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.

  7. #7
    Ext GWT Premium Member
    Join Date
    Mar 2009
    Posts
    226
    Vote Rating
    3
    The_Jackal is on a distinguished road

      0  

    Default


    Quote Originally Posted by Luming Lai View Post
    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.

    Code:
    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.
    Code:
    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:

    Code:
    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);
      }
    });