1. #1
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Answers
    2
    Vote Rating
    1
    darkling235 is on a distinguished road

      0  

    Default Answered: Content Panel collapse change size

    Answered: Content Panel collapse change size


    I'm trying to extend the ContentPanel to work something like a collapsible TabPanel (i.e. click on the Tool buttons on the top and the ContentPanel expands, and shows the correct widget specified by that ToolButton). This component is working but when collapsed it still seems to take up a lot of space. I was hoping that when collapsed I could get the Panel to only take up the narrow slice of screen space required by its header. When it expands I wanted it to increase the size it takes up until the entire thing can be seen. Right now when collapsed it seems to leave a big grey chunk underneath for the expanded panel to use later.
    I'm not really sure how modify the size the panel is using. I'm placing the collapse ContentPanel in a VerticalLayoutContainer. Do I need to tell that container to resize the element each time it expands and collapses or is there a better way? In point of fact I haven't found any means of telling the VerticalLayoutContainer to modify its VerticalLayoutData item for a specific child. Am I going about this wrong?
    Any insight would be welcome as I'm not quite sure which component's responsibility this type of resizing would be.

  2. VerticalLC sizes its children, not the other way around. So the VLC doesn't get notified when the ContentPanel changes size. You might want to add a collapse/expand handler on the ContentPanel, and modify the VLC (probably change height from some percentage to -1 and back, as well as invoking forceLayout).

  3. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Answers
    109
    Vote Rating
    89
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    VerticalLC sizes its children, not the other way around. So the VLC doesn't get notified when the ContentPanel changes size. You might want to add a collapse/expand handler on the ContentPanel, and modify the VLC (probably change height from some percentage to -1 and back, as well as invoking forceLayout).

  4. #3
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Answers
    2
    Vote Rating
    1
    darkling235 is on a distinguished road

      0  

    Default


    Ok I doubt this is the best answer but this is what worked for me. Hopefully it helps out someone else. I pass in a ref to my VLC and remove and readd components as I need to resize them. I doubt it's optimal but it does work.

    Code:
        private EventGrid eGrid;
        private EventGrid jGrid;
        private boolean collapsed;
        private HTML html;
        private VerticalLayoutContainer container;
        public ShutterPanel(VerticalLayoutContainer vlc, HTML h)
        {
            html = h;
            container = vlc;
            this.getElement().setZIndex(1000000000);
            this.collapse();
            this.setHideCollapseTool(true);
            collapsed = true;
            this.setCollapsible(true);
            this.setMinButtonWidth(250);
            ToolButton eventsButton = new ToolButton(ToolButton.EXPAND);
            eventsButton.addSelectHandler(new SelectHandler(){
    
                @Override
                public void onSelect(SelectEvent event) {
                    setWidget(eGrid);                    
                    expose(true);
                }});
    
            ToolButton jobsButton = new ToolButton(ToolButton.EXPAND);
            jobsButton.addSelectHandler(new SelectHandler(){
    
                @Override
                public void onSelect(SelectEvent event) {
                    setWidget(jGrid);
                    expose(false);
                }});
            
            eGrid = new EventGrid();
            jGrid = new EventGrid();
            
            this.addTool(eventsButton);
            this.addTool(jobsButton);
            
            TextButton close = new TextButton("Close");
            close.addSelectHandler(new SelectHandler(){
    
                @Override
                public void onSelect(SelectEvent event) {
                    collapsed = true;
                    onScaleBaseCollapse();
                    
                }});
            this.addButton(close);
        }
        
        public void onScaleBaseCollapse()
        {
            container.remove(this);
            container.add(html, new VerticalLayoutData(-1, .7));
            container.add(this, new VerticalLayoutData(-1, .05));
            this.collapse();
            container.forceLayout();
        }
        
        public void expose(boolean clickOnEvent)
        {
            if(collapsed) //expand
            {
                expand();
                container.remove(html);
                container.remove(this);
                container.add(this, new VerticalLayoutData(-1, .7));
                container.forceLayout();
                collapsed = false;        
            }
        }

  5. #4
    Sencha User
    Join Date
    Jan 2010
    Posts
    132
    Answers
    2
    Vote Rating
    1
    darkling235 is on a distinguished road

      0  

    Default


    Hmm, someone else came up with a similar answer. Totally missed that :-)

  6. #5
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Answers
    109
    Vote Rating
    89
    Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light Colin Alworth is a glorious beacon of light

      0  

    Default


    Re-adding the widget has the same effect as changing the layout data, and since you are also forcing layout to occur again, we do effectively have the same solution.

    This is slightly expensive, and won't behave perfectly if you want to use animations, so you might consider a custom layout to perform these actions that deals with these details more directly, especially if you plan on reusing this.

Thread Participants: 1

Tags for this Thread