1. #1
    Sencha User
    Join Date
    Mar 2009
    Posts
    43
    Vote Rating
    0
    cgokey2 is on a distinguished road

      0  

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

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


    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




    Code:
    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);
    
    
        }
    }
    Code:
      
    public void onModuleLoad()
        {
            RootPanel p = RootPanel.get();
            LayoutContainer c = new LayoutContainer(new FitLayout());
            c.setSize(500,500);
            c.add(new TestAccordion());
            p.add(c);
        }

  2. #2
    Sencha User
    Join Date
    Mar 2009
    Posts
    43
    Vote Rating
    0
    cgokey2 is on a distinguished road

      0  

    Default Smaller test case....

    Smaller test case....


    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.

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

  3. #3
    Software Architect
    Join Date
    Sep 2007
    Posts
    13,971
    Vote Rating
    132
    sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light sven is a glorious beacon of light

      0  

    Default


    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.

Similar Threads

  1. Need help in understanding anchor layout in case of IE
    By sjmittal in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 4 Feb 2011, 5:38 AM
  2. Replies: 1
    Last Post: 23 Apr 2010, 11:38 AM
  3. IE7/IE8 do not like border layout (in my case)
    By rocksportrocker in forum Ext 3.x: Help & Discussion
    Replies: 3
    Last Post: 10 Jun 2009, 2:40 AM
  4. Forms inside Tabs Issue (Video included)
    By Davi Baldin in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 6 Feb 2008, 9:12 AM

Thread Participants: 1