1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    10
    Vote Rating
    0
    drkstr is on a distinguished road

      0  

    Default Unanswered: HorizontalLayoutContainer with multiple dynamically sized children

    Unanswered: HorizontalLayoutContainer with multiple dynamically sized children


    Hello Everyone,

    I have been checking out GXT the past few days to see about the possibility of moving away from Adobe Flex.

    I have content that will be loaded at run-time as domain models. This content has various layout options that were somewhat designed around the capabilities in Flex. I've been able to implement most of the concepts using the various layout containers, but I am not sure of the best way to handle a HorizontalLayoutContainer with multiple dynamically sized child elements.

    Consider the following example:


    Code:
    @Override
    public void onModuleLoad()
    {
        HorizontalLayoutContainer contentGroup = new HorizontalLayoutContainer();
    
        ContentPanel panel = null;
    
        panel = new ContentPanel();
        panel.setHeadingText("Panel 1");
        contentGroup.add(panel, new HorizontalLayoutData(100, 1));
    
        panel = new ContentPanel();
        panel.setHeadingText("Panel 2");
        contentGroup.add(panel, new HorizontalLayoutData(100, 1));
    
        panel = new ContentPanel();
        panel.setHeadingText("Panel 3");
        contentGroup.add(panel, new HorizontalLayoutData(1, 1));
    
        panel = new ContentPanel();
        panel.setHeadingText("Panel 4");
        contentGroup.add(panel, new HorizontalLayoutData(100, 1));
    
        Viewport viewport = new Viewport();
        viewport.add(contentGroup, new MarginData(20));
        RootPanel.get().add(viewport);
    }
    This works as expected, in that I will have 3 panels with a width of 100, and one panel that fills up the remaining space.

    The problem comes into play if I also set Panel 4 to HorizontalLayoutData(1, 1). In Flex, I would get 2 panels with a width of 100, and 2 equally sized panels filling up the remaining space. In GXT, Panel 3 fills up the remaining space and Panel 4 is pushed out of view.

    sencha_test_screen.jpg

    What is the best way to handle this use case using the 3.x component set? Do I need to measure and set explicit widths during the layout phase? If so, at what point in the component life-cycle would it be appropriate to do this?


    Many thanks for your time!

    ~Aaron

  2. #2
    Sencha - GXT Dev Team
    Join Date
    Feb 2009
    Location
    Minnesota
    Posts
    2,634
    Answers
    107
    Vote Rating
    80
    Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice Colin Alworth is just really nice

      0  

    Default


    Good question - I seem to recall this code as having worked in GXT 2.x, though I could be misremembering.

    The values for HorizontalLayoutData and VerticalLayoutData have different meanings depending on which range they are in:

    * If -1, then the item is measured, and given the space it has requested - useful for fields or labels
    * If greater than 1, a pixel value is assigned - you've noticed this in using 100, which draws as 100px wide
    * If greater than 0, and less than or equal to 1, then it will be assigned a percentage of the remaining size after the first two items listed have been calculated. The value 1 is 100%, and .25 would be 25% of the remaining space.

    In your example, I believe you want to use .5 instead of 1 when you have two items that should equally share the space. I've tested it briefly with your sample, and it seems to have achieved the effect intended:

    Code:
      @Override
      public void onModuleLoad()
      {
          HorizontalLayoutContainer contentGroup = new HorizontalLayoutContainer();
    
          ContentPanel panel = null;
    
          panel = new ContentPanel();
          panel.setHeadingText("Panel 1");
          contentGroup.add(panel, new HorizontalLayoutData(100, 1));
    
          panel = new ContentPanel();
          panel.setHeadingText("Panel 2");
          contentGroup.add(panel, new HorizontalLayoutData(100, 1));
    
          panel = new ContentPanel();
          panel.setHeadingText("Panel 3");
          contentGroup.add(panel, new HorizontalLayoutData(.5, 1));
    
          panel = new ContentPanel();
          panel.setHeadingText("Panel 4");
          contentGroup.add(panel, new HorizontalLayoutData(.5, 1));
    
          Viewport viewport = new Viewport();
          viewport.add(contentGroup, new MarginData(20));
          RootPanel.get().add(viewport);
      }
    I hope this helps to resolve your issue, and makes it clear how these containers can be used to dynamically size content - and welcome to the GXT community!

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    10
    Vote Rating
    0
    drkstr is on a distinguished road

      0  

    Default


    Yes! This is exactly what I was looking for.

    Thank you for the help, and for the warm welcome.



    Cheers and thanks again!

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar