You found a bug! We've classified it as EXTGWT-2153 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    139
    Vote Rating
    4
    jvahabzadeh is on a distinguished road

      0  

    Default Bug: HorizontalLayoutContainer inside NOT first tab panel

    Bug: HorizontalLayoutContainer inside NOT first tab panel


    Ok, that title's a little confusing, let me explain.

    I am creating a Window subclass that contains some components, one of which is a TabPanel.

    The contents of the tabs are HorizontalLayoutContainers, each of which contains 2 VerticalLayoutContainers - effectively creating two columns for me.

    Now, when the window comes up, the first tab is selected, and things are displayed as I expect.

    However, if I click on the second tab, but do NOT move the mouse at all, the contents of the two VerticalLayoutContainers inside the HorizontalLayoutContainer parent overlap each other.

    BUT, once I move the mouse even slightly, those overlapping parts pull away and position correctly.

    Is there a workaround?

    Here's code that demonstrates the problem. This happens on both IE9 and Firefox 10, I am not able to test on other browsers/versions.

    (note, I get strange dots on the tabs, and some odd positioning of the tabs themselves, but this doesn't happen in my main (much bigger) code from which the sample below is derived).

    PHP Code:
    public class Bug_SenchaHorizPanelsIn2ndTab extends Window implements EntryPoint {

      public 
    void onModuleLoad() {
        
    VerticalLayoutContainer container = new VerticalLayoutContainer();
        
    ToolBar idSelctionContainer = new ToolBar();
        
    Label label = new Label("Id: ");
        
    TextField idField = new TextField();
        
    idSelctionContainer.add(label);
        
    idSelctionContainer.add(idField);
        
    TabPanel tabPanel = new TabPanel();
        
    tabPanel.add(getPage1Widget(), "Page 1");
        
    tabPanel.add(getPage2Widget(), "Page 2");
        
    container.add(idSelctionContainer, new VerticalLayoutData(1, -1));
        
    container.add(tabPanel, new VerticalLayoutData(11));
        
    add(container);
        
    setPixelSize(400300);
        
    show();
        
    center();
      }

      private 
    Widget getPage1Widget() {
        
    HorizontalLayoutContainer container = new HorizontalLayoutContainer();
        
    VerticalLayoutContainer column1 = new VerticalLayoutContainer();
        
    VerticalLayoutContainer column2 = new VerticalLayoutContainer();
        
    column1.add(new Label("Some label"));
        
    column2.add(new Label("Some other label"));
        
    container.add(column1);
        
    container.add(column2);
        return 
    container;
      }

      private 
    Widget getPage2Widget() {
        
    HorizontalLayoutContainer container = new HorizontalLayoutContainer();
        
    VerticalLayoutContainer column1 = new VerticalLayoutContainer();
        
    VerticalLayoutContainer column2 = new VerticalLayoutContainer();
        
    column1.add(new Label("Page 2 first label"));
        
    column2.add(new Label("Page 2 second label"));
        
    container.add(column1);
        
    container.add(column2);
        return 
    container;
      }


  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Vote Rating
    88
    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


    Without addressing the apparent bug, the dots sounds like you are missing the reset.css file from your html page. Can you verify that this file is being loaded (i.e. no 404 in firebug for it), or that adding it fixes the strange dots issue? And if so, does it address the rest of the issue?

  3. #3
    Sencha Premium Member
    Join Date
    Oct 2011
    Posts
    139
    Vote Rating
    4
    jvahabzadeh is on a distinguished road

      0  

    Default


    Colin,

    Yes, you are correct, I neglected to put the reset.css reference in, thus resulting in the dots.

    Adding the reset.css makes the dots go away, but otherwise does not affect the positioning issue - the problem is still there.

  4. #4
    Sencha User WesleyMoy's Avatar
    Join Date
    Oct 2009
    Location
    Redwood City, California
    Posts
    402
    Vote Rating
    2
    WesleyMoy is on a distinguished road

      0  

    Default


    Thanks for the report and the test case. I'm able to replicate this issue. I've filed a ticket for the team to take a closer look and to see what can be done to fix or mitigate the problem.

  5. #5
    Sencha User
    Join Date
    Jul 2012
    Posts
    2
    Vote Rating
    0
    Christian.Kreutzer-Beck is on a distinguished road

      0  

    Default


    I've found following workaround:
    If you provide the layoutData as a parameter to the methods
    Code:
    add(IsWidget child, HorizontalLayoutData layoutData);
    add(IsWidget child, VerticalLayoutData layoutData);
    with appropriate width and height, the overlapping doesn't happen on that panel.

    In addition to that, i've noticed the following behavior:
    After the panels have added to the TabPanel, it is possible to invoke the method
    Code:
    setActiveWidget(Widget item);
    The widget, which was provided as a parameter will succeed. That means, this widget will have no overlapping but the others.

  6. #6
    Sencha User
    Join Date
    May 2013
    Posts
    7
    Vote Rating
    0
    kushal.bagaria is on a distinguished road

      0  

    Default


    Facing same issue....
    What to do?

  7. #7
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,717
    Vote Rating
    88
    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


    It looks like I didn't give this a close enough look the first time through - there is no bug here, and the workaround is the correct answer. You must provide layout data when adding children that require sizes to a VLC or HLC.

    The default if you just call add(child) is to assume that the child *already has* a size. If it must be sized by its parent, then use add(child, layoutData) to specify the rules to resize it (percentage or fixed pixel size).

    Some widgets that must have sizes to behave correctly:
    * Grid, TreeGrid - these need it to decide where to draw their inner scrollbars
    * HLC, VLC - these need a size to know how to in turn size *their* children.