Page 2 of 3 FirstFirst 123 LastLast
Results 11 to 20 of 22

Thread: VerticalLayoutContainer does not calculates own height properly.

  1. #11
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,165

    Default

    The VerticalLayoutContainer is meant for top down sizing, which means it either has to be given a size or the parent sizes it. When using -1 for any layoutdata, will turn off sizing for that dimension, which means the child is responsible for that sizing and in theory, it won't run sizing for that dimension which includes margins. So if you add margins to vertical layout container with margins and there is a -1 for height or width, the margins will likely not work.

    Most of the issues seem to be around, "why isn't my child get sized or margins showing up?". Thats usually because a top down container has been used and the -1 shuts off sizing for the children or the margins. In this case the child has to do the sizing work, not the container that the child sits in.

    Another issue is how the widgets are constructed, IsWidget vs Composite widget construction. If you are using composite with a layout widget, then that Composite will have to implement RequiresResize. This is critical and more information can be found here.
    http://docs.sencha.com/gxt/3.1/ui/Wi...gurations.html

    More information on the VLC container
    http://docs.sencha.com/gxt/3.1/ui/la...Container.html

    If you don't want to provide a size by parent or setting it by setPixelSize, then maybe one of the other containers may be suited for the job, like FlowLayoutContainer, CssFloatLayoutContainer, or VBoxLayoutContainer. There suited to do different jobs and configurations depending on the goals.

    The FlowLayoutContainer is the best option for bottom up sizing, which means the children are responsible for there own sizes, and the FLC doesn't care and it can provide margin data when adding the children. Like if adding a Grid as a child to the FLC, the Grid will need to be given a specific size because it needs a specific size so it can calculate its header, row widgets and such.

    Code:
    import com.google.gwt.user.client.ui.RootPanel;
    import com.sencha.gxt.widget.core.client.container.FlowLayoutContainer;
    import com.sencha.gxt.widget.core.client.container.MarginData;
    import com.sencha.gxt.widget.core.client.form.TextField;
    
    
    public class FlowLayoutContainerExample {
    
    
      public FlowLayoutContainerExample() {
        TextField tb1 = new TextField();
        TextField tb2 = new TextField();
        
        FlowLayoutContainer flc = new FlowLayoutContainer();
        flc.setBorders(true);
        flc.add(tb1, new MarginData(10));
        flc.add(tb2, new MarginData(10));
        
        RootPanel.get().add(flc);
      }
      
    }
    The next option is the CSSFloatLayoutContainer option is best used when the width has been set by its parent or given directly to the CFLC. It works good if you want to stack things vertically, or when all the rows are like the VerticalLayoutData(1, -1). It also works great for Floating to the right or left and getting a gallery like view. Another benefit to this container it isn't as heavy calculation sizer as the VerticalLayoutContainer is, but thats indistinguishable to the human eye most of the time, but something to be aware of.

    More on the CssFloatLayoutContainer
    http://docs.sencha.com/gxt/3.1/ui/la...Container.html

    Code:
    CssFloatLayoutContainer con = new CssFloatLayoutContainer();
    con.add(getRowWidget(1), new CssFloatData(1)); // 1 == 100%
    con.add(getRowWidget(2), new CssFloatData(1));
    con.add(getRowWidget(3), new CssFloatData(1));
    If you get stumped on what you should use, provide a wire frame with colored borders for the boundaries and the expected goals and I'll mock up options to layout the widgets. (This could be a screenshot of what your trying to do with colored borders, or some mocked up wireframe using a tool...)

    I know at first that layout container seem daunting and seem to have issues, but once I picked up on the behaviors and options, they exceedingly help drive quicker layout development for me. I also know the challenges and working hard to help provide more guides, tips and information to help digest the options quickly.

    Like always there are more options than the above mentioned and I'm standing by to help, send me a wire frame and I can provide even more options.


    ~ New GXT Guides ~
    http://docs.sencha.com/gxt/3.1/


    ~ Tips and Announcements Community ~
    https://plus.google.com/communities/...85143928405373

  2. #12
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,165

    Default

    Just one more note, what I said above doesn't appear to be working for you, please let us know. Let us know by using a wire frame, screenshot and code configuration to help us provide something back to you quickly.

    When providing a code configuration and small test case that we can run locally will help us quickly run and provide options in return.

    The goal, if you try to put something together and it has an issue, we can help modify that and send it back. (I have several test cases sitting in the wings if you need something to help get going with.)

    Thanks,
    Brandon

  3. #13
    Sencha User
    Join Date
    Jul 2011
    Location
    Germany
    Posts
    223

    Default

    branflake, thanks for this helpful info!

    According to your info given above, I would consider the javadoc of VLC misleading, if not buggy:
    Code:
    /**
     * A layout container that lays out its children in a single column. The lay out
     * properties for each child are specified using {@link VerticalLayoutData}.
     * 
     * <p/>
     * Code Snippet:
     * 
     * <pre>
        VerticalLayoutContainer c = new VerticalLayoutContainer();
        c.add(new FieldLabel(new TextField(), "Home"), new VerticalLayoutData(1, -1));
        c.add(new FieldLabel(new TextField(), "Office"), new VerticalLayoutData(1, -1));
        RootPanel.get().add(c);
     * </pre>
     */
    public class VerticalLayoutContainer extends InsertResizeContainer implements HasScrollHandlers, HasScrollSupport {
    ...

  4. #14
    Sencha Premium Member
    Join Date
    Feb 2011
    Posts
    10

    Default

    Brandon thanks for your explanations. i appreciate your time and effort.

    Currently we have solved this issue by giving a fixed height for all of our vlcs.

  5. #15
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,165

    Default

    @Andreas Samjeske Good point about the VLC Javadocs. I think we will change the example a little and provide the alternative links as well. The VLC can use -1 in its layoutdata, it just has different impacts depending on the children. Thanks for sharing.

    @[email protected] Thanks for the information.

  6. #16
    Ext GWT Premium Member
    Join Date
    Jun 2010
    Location
    Kyrksterra, Norway
    Posts
    71

    Default

    Thanks for the info, branflake.
    Are there a plan for a release with the CssFloatLayoutContainer margins bug ironed out?

  7. #17
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,165

    Default

    Yeah, we escalated the CssFloatLayoutContainer margins issue and an engineer has been assigned that task. So if all the testing goes well it should make it in the next release.

  8. #18
    Ext GWT Premium Member
    Join Date
    Jun 2010
    Location
    Kyrksterra, Norway
    Posts
    71

    Default

    You should probably also add "position: relative;" to the child element CSS, in order to position its inner content correctly.

  9. #19
    Ext GWT Premium Member
    Join Date
    Jun 2010
    Location
    Kyrksterra, Norway
    Posts
    71

    Default

    These changes did not make it into the 3.1.1 release. Any plans on when this will be added to an official release?

  10. #20
    Sencha Sr Product Manager
    Join Date
    Jan 2012
    Location
    Arlington, WA
    Posts
    1,165

    Default

    Just an update, the fix is in review and is going in shortly for children with margins. I'll update you when the nightlies are available.

Page 2 of 3 FirstFirst 123 LastLast

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •