overflow issue in my layout. please help... test case included...

[cgokey2]

I'm getting an overflow issue with this layout hierarchy:

A-Content Panel (Fit Layout), has a scroll bar
B-Layout Container (Fit Layout), has borders
C-Layout Container (Flow Layout) contains many widgets

if C exceeds the height of A and B, only A expands which is evident by the scroll bars, B doesn't seem to expand which is evident by the text in C overflowing outside of the border line of B. See screen shot.


Any help to make this kind of hierarchy work would be greatly appreciated.

Thanks,
Chris

import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.FitData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.google.gwt.user.client.ui.Label;

public class TestAccordion extends LayoutContainer {
    public TestAccordion() {
        setLayout(new FitLayout());

        ContentPanel contentPanel = new ContentPanel();
        contentPanel.setLayout(new FitLayout());
        contentPanel.setHeading("Overflow Issue");
        contentPanel.setScrollMode(Style.Scroll.AUTOY);

        LayoutContainer contentContainer = new LayoutContainer(new FitLayout());
        contentContainer.setBorders(true);

        LayoutContainer rowContainer = new LayoutContainer(new FlowLayout());
        Label label;
        for (int i=0; i<50; i++) {
            label = new Label("The number is "+i);
            rowContainer.add(label);
        }

        contentContainer.add(rowContainer);
        contentPanel.add(contentContainer, new FitData(20));

        add(contentPanel);


    }
}

  
public void onModuleLoad()
    {
        RootPanel p = RootPanel.get();
        LayoutContainer c = new LayoutContainer(new FitLayout());
        c.setSize(500,500);
        c.add(new TestAccordion());
        p.add(c);
    }

[cgokey2]

I was able to shorten the test case a little more... Now the layout hierarchy is just:
A-ContentPanel (FitLayout) has scrollbar
B-LayoutContainer (FlowLayout) has border and contains many widgets

As I add widgets to B, the scroll bar in A does appear, but the text overflows past the bottom border in B. It doesn't re-adjust B's total height for some reason.

import com.extjs.gxt.ui.client.Style;
import com.extjs.gxt.ui.client.widget.ContentPanel;
import com.extjs.gxt.ui.client.widget.Label;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.layout.FitData;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;

public class TestOverflow extends LayoutContainer {
    public TestOverflow() {
        setLayout(new FitLayout());

        final ContentPanel contentPanel = new ContentPanel();
        contentPanel.setLayout(new FitLayout());
        contentPanel.setHeading("Overflow Issue");
        contentPanel.setScrollMode(Style.Scroll.AUTOY);


        final LayoutContainer rowContainer = new LayoutContainer(new FlowLayout()) ;

        Label label;
        for (int i=0; i<500; i++) {
            label = new Label("The number is "+i+"<br>");
            rowContainer.add(label);
        }
        rowContainer.setBorders(true);
        contentPanel.add(rowContainer, new FitData(20));
        add(contentPanel);
    }
}

[sven]

A FitLayout (as the name should tell) fits something into the parent size. This means there will never be any scrollbars. You need to give your inner LayoutContainer the scrollmode.