1. #1
    Sencha User
    Join Date
    Sep 2012
    Posts
    31
    Vote Rating
    1
    Answers
    2
    billsalvucci is on a distinguished road

      0  

    Default Unanswered: resizing of things in layouts

    Unanswered: resizing of things in layouts


    I'm having a hard time figuring out how things within layout containers get resized.

    I started out with the http://www.sencha.com/examples/#Exam...yout(uibinder) Basically, it says the left and right will get as much width as it needs, and the middle will get what is left.

    Code:
    <ui:with type="com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData"    field="centerLayoutData">
        <ui:attributes width="1" height="1" margins="{centerMargins}" />
      </ui:with>
     
      <ui:with type="com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData"
        field="sideLayoutData">
        <ui:attributes width="-1" height="1" margins="{sideMargins}" />
      </ui:with>
    
    <container:HorizontalLayoutContainer>        
            <container:child layoutData="{sideLayoutData}">
              <g:Label text="Test Label 1" addStyleNames="pad-text, white-bg, {themeStyles.border}" />
            </container:child>
            <container:child layoutData="{centerLayoutData}">
              <g:Label text="Test Label 2" addStyleNames="pad-text, white-bg, {themeStyles.border}" />
            </container:child>
            <container:child layoutData="{sideLayoutData}">
              <g:Label text="Test Label 3" addStyleNames="pad-text, white-bg, {themeStyles.border}" />
            </container:child>
          </container:HorizontalLayoutContainer>
    That works great. It continues to work as I would expect, if I wrap a SimpleContainer around a Label.

    Code:
                    <container:SimpleContainer borders="true">
                          <g:Label text="Test Label 1" addStyleNames="pad-text, white-bg, {themeStyles.border}" />
                    </container:SimpleContainer>
    But if I wrap any LayoutContainer (not sure if all of them do, but I tried Horizontal, HBox, Center), then the left gets no width; the center takes it.

    Code:
    <container:HorizontalLayoutContainer borders="true">
        <container:child>
                          <g:Label text="Test Label 1" addStyleNames="pad-text, white-bg, {themeStyles.border}" />
         </container:child>
    </container:HorizontalLayoutContainer>
    Can one explain why this is? Is there a good general explanation of the various layouts and their various config options?

  2. #2
    Sencha User
    Join Date
    Sep 2012
    Posts
    31
    Vote Rating
    1
    Answers
    2
    billsalvucci is on a distinguished road

      0  

    Default


    CssFloatLayoutContainer works, i.e. the left is sized accoring to the width="-1" of the layoutData.

    Code:
                  <container:CssFloatLayoutContainer borders="true">
                        <container:child>
                            <container:SimpleContainer styleName="vendorLogoPanel">
                                <g:Image resource="{resources.logoVendor}" addStyleNames="vendorImage" />
                            </container:SimpleContainer>
                        </container:child>
                        <container:child>
                            <container:SimpleContainer styleName="vendorNamePanel">
                                <g:Label text="{messages.vendorName}" addStyleNames="vendorLabel" />
                            </container:SimpleContainer>
                        </container:child>
                    </container:CssFloatLayoutContainer>
    If I simply change CssFloatLayoutContainer to HorizontalLayoutContainer, the left no longer gets any width.

    Both classes extend/implement the same things
    extends InsertResizeContainer implements HasScrollHandlers, HasScrollSupport

    I'm fine using CssFloatLayoutContainer, but I'd really like to understand why this behaves as it does.

    On a side note, why doesn't CssFloatLayoutData allow you to set a margin?