Results 1 to 4 of 4

Thread: what's the difference between column layout and hbox layout?

  1. #1
    Sencha Premium Member
    Join Date
    Jun 2014
    Posts
    22

    Default what's the difference between column layout and hbox layout?

    In my opinion, they are same. they are both horizontal layout.Column layout uses columnWidth to divide a container into many parts, and hbox uses flex to divide. In fact, ColumnWidth and flex are the same with percentage.
    After all, what's the condition can i use column layout or hbox layout?

  2. #2
    Sencha User joel.watson's Avatar
    Join Date
    Nov 2014
    Posts
    3,120
    Answers
    446

    Default

    Hi lenlee--

    Yes, you can get hbox and column layouts to behave very similarly in terms of "column" widths. Besides structural differences in terms of markup that is generated, the results for how the layout and management of the items within these layouts is quite a bit different, even if the results seem the same on the surface. I'd encourage you to check out the Fiddle I'm including below, open up developer tools, and just explore the differences between the two.

    Thanks!
    Joel


  3. #3

    Default

    Am I correct in assuming the column layout breaks to a new line whereas hbox does not? Eg: https://fiddle.sencha.com/#fiddle/1chf

  4. #4
    Sencha User jdkhamba's Avatar
    Join Date
    Jul 2012
    Posts
    236
    Answers
    45

    Default

    In the example you have provided , the columnWidths add up to more than 1. So it is breaking to a new line. If they add up to 1 , they will be in the same line. Try making each of them as columnWidth:.25 and they won't break to a new line.

    Hbox on the other hand uses flex as a relative width and regardless of what value they have, they will always be in the same line. For example, if the flex value of the items are 1,2,3,4 respectively, what that really means is that the first item will occupy 1/10 of the total width, second 2/10 of the total width and so on since 1+2+3+4 = 10.

Tags for this Thread

Posting Permissions

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