ExtJS Box Layout

A.flex Configuration Items

The flex configuration item is not set on the layout, but instead sets the configuration item in the subkey. The flex value relative to each subkey is compared to the value of the total child flex, and according to this result, the last number of flex to process each child. If you do not set the flex for the child, it means that the child does not handle the adaptive dimension, which is equivalent to flex = 0 's child or flex = Undefined, indicating that the subkey is not self-scaling and the original size is used.

{layoutconfig: {padding:' 5 ', align:' Top '}, Defaults:{margins:' 0 5 0 0 '}, items:[{xtype:' Button ', Text:' Button 1 ', Flex:1},{xtype:' Button ', Text:' Button 2 ', Flex:1},{xtype:' Button ', Text:' Button 3 ', Flex:1},{xtype:' Button ', Text:' Button 4 ', Flex:3, Margins:' 0 '      }]  }

Of course we can Vbox the layout of the embedded Hbox layout, or Hbox embedded Vbox,hbox and Vbox between can allow nested layout, but actually do not have to do so manually, EXT provides us with "alignment align/pack" This pair of different directions of adjustment configuration,

Instead of the above "inline" this one slightly uncomfortable. Each subkey in a container follows the user-specified align/pack alignment. The general setting is in the container's Layoutconfig configuration item object, such as the code snippet for one of the following containers:

For vertical layout VBox, the property align is the horizontal alignment setting, align has the following options:

Key value Action
Left, the horizontal alignment from the container. This is the system default option.
Center Center, starting with the container's mid-width vertical alignment.
STRETCN stretches the child to fill the horizontal width of the container.
Stretcnmax stretches the widest child to fit the horizontal width of the container.
The property pack is the control of how the child within the container is docked, which is the alignment of the vertical direction itself. Like the following settings:

Key value Action
Start top, docking the child from the top of the container. This is the system default option.
Center Center, that is, children start docking from the mid-height of the container.
End, starting from the bottom edge of the container to the top of the sub-assembly.
For the horizontal layout of the Hbox, align is the decision on how to align vertically, align options are as follows:

Key value Action
Top aligns vertically, starting from the top of the container.
Middle the center alignment, starting from the middle of the container vertically.
Stretch stretches the child to fill the container's vertical height.
Stretchmax stretches the tallest child to fit the vertical height of the container.
There are several options available for pack:

Key value Action
Start is left and the contents are arranged from the left.
Center Center, that is, start docking content from the mid-width of the container.
End to the right, starting from the right side of the container to dock content.

BoxLayout can set the margin (margins). With respect to Defaultmargins, the default margins is used if the margins attribute is not set for each subkey.

The default is {top:0, right:0, bottom:0, left:0}. The format that the margin attribute accepts can also be a string, delimited by a space, and a margin value of a numeric type. The order of each direction is the order of the CSS:

If it's just a value, that's the value in all directions.
If there are two values, the first value represents the value in the upper and lower direction, and the second value is the left and right direction value.
If there are three values, the first value is the top value, the second value is the left and right side value, and the third value is the bottom value.
If there are four values, each represents the top, right, bottom, and left values (which can be interpreted as a clockwise direction for easy memory).
The boxlayout can be set to the inner margin (padding). Similar to Defaultmargins, the padding attribute accepts a format that can be a string, formatted as a space, and a margin value of a numeric type. The order of each direction is the order of the CSS.

ExtJS Box Layout