1. #1
    Ext User
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    0
    Clay Ferguson is on a distinguished road

      0  

    Default RowLayout(Orientation.HORIZONTAL) not calculating height correctly

    RowLayout(Orientation.HORIZONTAL) not calculating height correctly


    The following should show a horizontal array of buttons, but for some reason the height ends up being zero. I think RowLayout (horizontal) may have a bug so that it only renders right (nonzero height) if you manually set the height? Is this right or am I missing something?

    HTML Code:
    public class HorizontalButtonBar extends LayoutContainer {
     
     @Override
     protected void onAfterLayout() {
      super.onAfterLayout();  
      System.out.println("Debug Height = "+getHeight());
     } 
     
     public HorizontalButtonBar(Button[] buttons) {
      super(new RowLayout(Orientation.HORIZONTAL));
         for (Button button : buttons) {   
          add(button, new RowData(-1,-1, new Margins(10,10,10,10)));
         }
     } 
    }

  2. #2
    Sencha User
    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


    I guess you are not sizing your HorizontalButtonBar.

  3. #3
    Ext User
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    0
    Clay Ferguson is on a distinguished road

      0  

    Default


    Quote Originally Posted by sven View Post
    I guess you are not sizing your HorizontalButtonBar.
    Shouldn't it work just like this works (below).... which works fine.

    HTML Code:
    [LEFT]public class HorizontalButtonBar extends HorizontalPanel  {
    
    
    public HorizontalButtonBar(Button[] buttons) { 
        setSpacing(10);
    
         for (Button button : buttons) {
            add(button);
        }[/LEFT]
    }
    HorizontalPanel seems to realize that my buttons are not all zero in size, and therefore it looks fine. However RowLayout seems to forget that the content (my buttons) may have some size. I realize GXT is not trying to model an API like Swing where there there *is* always a 'preferredSize', but nonetheless it should work in a case as simple as this. its' just a row of buttons! I can't set the height, because I want to be 'font independent' in my code. Hard coding sizes (as any Swing or SWT user knows) is *extremely* bad practice, nearly 100% of the time.

  4. #4
    Ext User
    Join Date
    Jun 2009
    Posts
    7
    Vote Rating
    0
    Clay Ferguson is on a distinguished road

      0  

    Default workaround

    workaround


    here's what I did as a workaround...

    HTML Code:
    public class HorizontalButtonBar extends LayoutContainer {
     private Button[] buttons;
     private static final BUTTON_BAR_SPACING = 10
     
     @Override
     protected void onAfterLayout() {
      super.onAfterLayout();
     
      if (buttons.length > 0) {
       setHeight(buttons[0].getHeight()+BUTTON_BAR_SPACING*2);  
      }
     } 
     
     public HorizontalButtonBar(Button[] buttons) { 
      super(new RowLayout(Orientation.HORIZONTAL));
      this.buttons = buttons;
     
         for (Button button : buttons) {   
          add(button, new RowData(-1,-1, new Margins(BUTTON_BAR_SPACING, BUTTON_BAR_SPACING, BUTTON_BAR_SPACING, 0)));
         }    
     }  
    }
    it is ugly that I had to override onAfterLayout...but at least it works. This renders a horizontal array of buttons with *no space* at the left of the letftmost button which is what I wanted!

  5. #5
    Ext User
    Join Date
    Sep 2008
    Location
    Germany
    Posts
    961
    Vote Rating
    1
    Arno.Nyhm is on a distinguished road

      0  

    Default


    thanks for your workaround.

    im just now also getting grey hair with the layout: RowLayout / HBoxLayout / VBoxLayout.

    in the API there is written that this layout not calculate the height and you have to set it by yourself or from the outer layout - but im not getting this working without setting some height like you writing this.

    i need some widgets positioned horizontaly but i need the size of the H-Panel as the max size of the widgets.
    This forum needs your help: you got hints from the community and now you have fixed your code? dont just reply with "now its fixed" or "i found the error"! please take the time to post also an detailed answer with the working code.

    GreaseMonkey Script for a GXT-only Forum: it hides ExtJs here: New Posts • Search Results • Advanced Search form • Category overview http://www.extjs.com/forum/showthrea...041#post410041

  6. #6
    Ext JS Premium Member
    Join Date
    Apr 2009
    Posts
    19
    Vote Rating
    0
    JoeB is on a distinguished road

      0  

    Default


    For what it's worth, I've noticed the exact same problem - that RowLayout(horizontal) doesn't automatically calculate its height, whereas RowLayout(vertical) does. Sometimes I need to lay out a bunch of widgets horizontally, and I want to put them in a container whose height is automatically determined based on the contained widgets. I don't want to set a specific height on the container, because that's not maintainable when I put different widgets in it. This seems like a bug to me, or at least a painful limitation.

    -- Joe

  7. #7
    Sencha User
    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


    Horizontal RowLayout uses absolute positning. That means, that the holding container needs to be sized.

  8. #8
    Ext JS Premium Member
    Join Date
    Apr 2009
    Posts
    19
    Vote Rating
    0
    JoeB is on a distinguished road

      0  

    Default


    Okay, but is there any container that lays out its children horizontally and will automatically calculate its height? HBoxLayout doesn't seem to work this way either. Thanks for the tips!

  9. #9
    Sencha User
    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


    This is more or less a html limitation. The only way to do that would be using float: left. But that brings other things that are not so good. ColumnLayout is doing that.

  10. #10
    Ext User
    Join Date
    Nov 2009
    Posts
    15
    Vote Rating
    0
    ljohnston is on a distinguished road

      0  

    Default


    Something like the following should get you what you're after:

    Code:
        
        ContentPanel c = new ContentPanel();
        c.setHeaderVisible(false);
        c.setBorders(false);
        c.setBodyBorder(false);
    
        HBoxLayout layout = new HBoxLayout();
        layout.setPadding(new Padding(10,0,10,0));
        layout.setHBoxLayoutAlign(HBoxLayout.HBoxLayoutAlign.MIDDLE);
        c.setLayout(layout);
    
        HBoxLayoutData data = new HBoxLayoutData(new Margins(0,5,0,0));
        c.add(new Text("Label:"), data);
    
        data = new HBoxLayoutData(new Margins(0,5,0,0));
        data.setFlex(1);
        c.add(new TextField(), data);
    
        c.add(new Button("Button"));
    Using ContentPanel for this seems like a pretty heavy-handed approach, but it does seem to work.