Talk about Ext JS Components--Layout usage cont.

Box layout

The main function of the box layout is to divide the container area in horizontal (Ext.layout.container.HBox) or vertical (Ext.layout.container.VBox) mode. This is also a very common layout way.

With the box layout, you need to specify the width (HBox) or height (VBox) of the subassembly in the subassembly, in addition to the layout configuration item defined in the container. There are two ways of specifying the width or height. One is to use width or height directly to define, one is to use Flex configuration items, according to the scale to divide. Here are some examples to illustrate the use of the box layout, just use the horizontal box as a demonstration sample, the vertical box is not demonstrated.

Execute the following code on the page to create a 400x200 container. Then use the Horizontal box layout to add three panels of the 50x50, 100x100, and 150x150 sizes, respectively:

Ext.Create(' Ext.container.Container ', {renderTo:Ext.getBody (), Width: -, Height: $, border:5, style:{bordercolor:' Yellow ', BorderStyle:' Solid '}, layout:{type:' Hbox '}, defaults:{bodystyle:{bordercolor:' Red '}}, items:[{html:' 50x50 ', Width: -, Height: -}, {html:' 100x100 ', Width: -, Height: -}, {html:' 150x150 ', Width: Max, Height: Max}    ]});

In order to enhance the presentation effect. The container's border is deliberately set to 5 pixels and displayed in a solid yellow line, and the panel's border is also displayed with a solid red line, and finally the results are shown as follows:

can see from it. Because the total width of the subassembly cannot fill the width of the container, leaving a very large blank, to prevent this, use flex configuration items, such as changing the 150x150 panel's "width:150" to "flex:1" to fill the remaining blanks with the child components.

The modified width calculation rule is to first use the width of the container minus the total width of all the fixed-width subcomponents. Then assign the remaining width according to the scale of the flex setup, because there is only one flex. Thus all remaining widths are assigned to the 150X150 panel.

The best way to do this is to use Flex to allocate the width in a proportional way, assuming you don't know how much to set the child component.

The calculation rule for proportional partitioning is that the flex configuration items of the subassembly are added as the denominator, and the flex settings of each subassembly are used as the numerator, and then the width of the container is calculated proportionally to the width of the sub-component.

For example, the flex of the three subcomponents in the demo sample is set to 1, 2, 4, which in turn will have a width of 1/7, 2/7, and 4/7 for the total width. With division, the calculated values are inevitably rounded. Thus, the total width of the rounding may not be the total width of the container, so. At the end, the width of the last subassembly is adjusted so that the width of all subcomponents equals the total width.

In, you will find that the height of each sub-panel is different. There will be such a less beautiful effect, of course, sometimes it may require such an effect, but in general it is highly uniform for the height of the container is more beautiful. Suppose you want to make the height uniform a container height, you can define the align configuration item as stretch within the layout's configuration object. The code is as follows:

layout:{    type:‘hbox‘,    align:‘stretch‘},

For align configuration items. Other alignment options are available:

• Begin: Assume a horizontal box layout. Is the top alignment, assuming that the vertical box layout is left justified.
• Middle: Assume a horizontal box layout. is the vertical center alignment, which is the horizontal center alignment, assuming the vertical box layout.

• End: Assuming that the horizontal box layout is the bottom alignment. Assume a vertical box layout. is right-justified.

• Stretchmax: Assuming that the horizontal box layout is aligned, align the sub-component with the highest height. Assuming it is a vertical box layout, align the sub-component with the widest width.

Split bar

You can also use a splitter bar in a box layout. Only the component it uses differs from the border layout. It is using the Ext.resizer.Splitter component. To set the splitter bar in the box layout, use the same method as the border layout. Note that the split bar of the horizontal box layout is fixed bound to the left of the subassembly. The split bar of the vertical box layout is fixed to the top of the assembly, in general, whether it is a horizontal box layout or a vertical box layout. Setting a splitter bar on the first subassembly has no effect.

Packing

Assume that the effect is really needed. But you want all subcomponents to be centered. You can set the pack configuration item to center in the configuration object of layout, such as the following code:

layout:{    type:‘hbox‘,    pack: ‘center‘},

In this way, the three sub-components in the center are horizontally displayed. If you want to align right (horizontal box layout) or bottom (vertical box layout), you can set the pack value to end. The default value for pack is start, which is the effect in.

Adaptive layout (Ext.layout.container.Fit)

The adaptive layout is that the dimensions of the handle components are set to the dimensions of the container. Fully fills the container's visual space, which is often a comparison. It's also simpler, just set the layout type to fit.

In general, it is only appropriate to use the adaptive layout if the container has only one subassembly, otherwise, when there are multiple subcomponents, each subassembly will be the same size as the container, and the display will be problematic.

At this point, you should use the box layout or card layout.

Card Layout (Ext.layout.container.Card)

The card layout, like the adaptive layout, sets the size of the container to the size of the assembly, except that it is not. It can have multiple subcomponents, but only one of them is displayed at a time. In order to be able to switch between the child components. Specifically, GetNext, GetPrev, Next, Prev, and Setactiveitem were added to the layout. To invoke these methods, you need to call the container's GetLayout method to return the layout object before calling its method.

Center Layout (Ext.layout.container.Center)

The center layout is very easy, that is, the handle component all center display. Same as the box layout. It is also a way to use absolute positioning to center the sub-component display.

A typical application of a center layout is when a picture preview is displayed. Centers the picture component inside the container.

As with adaptive layouts. In a container, there is usually only one subassembly.

Assuming that there are multiple sub-components within the container, the subcomponents are centered, but the display is stacked, for example:

The effect is simply to place the layout changes in the demo example above without centering the layout, taking the large size subassembly as the first child component. Take the smallest sub-component as the last subcomponent. Effect can be seen, the center layout will cascade subcomponents according to the order in which the subcomponents are defined, that is, the last rendered subassembly will be displayed at the front.

To be Continued ...

Please respect the author's hard work, without consent. Please do not reprint this article, after all, the reader's support is the author's motivation to write articles.

Talk about Ext JS Components--Layout usage cont.