Extjs4.0 Standard Layout class

The Panel is equivalent to a clean white paper. If you add content directly on it, it will be difficult to control the display position of the panel content. The more panel elements, the less messy it will appear, therefore, you need to divide different areas on the panel and display the panel content to the desired position. Extjs provides panel support by providing multiple layout classes, including the following 11 types:

• Auto (Automatic Layout)

Ext. layout. container. auto Automatic Layout is the default layout type used by the container when no layout mode is specified. It uses the original HTML document stream to layout sub-elements and passes the layout call to the sub-container, the name of the corresponding panel layout configuration item (layout) is auto.

• FIT (Adaptive Layout)

Ext. layout. container. fit is the basic layout class. The corresponding panel layout configuration item (layout) is named fit. Fit layout will fill the unique sub-elements with containers, if multiple sub-panels exist in the current container, only the first one will be displayed.

• Accordion)

Ext. layout. Container. Accordion folding layout. The name of the corresponding panel layout configuration item is accordion. The layout will contain multiple sub-panels. At any time, only one sub-panel is open, and each sub-panel has built-in support for the expansion and contraction functions. Accordion layout is a layout class that is used in development. It can be switched between multiple sub-panels. It is suitable for displaying a large amount of group content or creating group menus that can be stretched.

• Card (card layout)

The name of the panel layout (layout) configuration item corresponding to Ext. layout. Container. cart is card. The layout contains multiple sub-panels, and only one sub-panel is displayed at any time. This layout class is often used to create wizard and Tab pages. The key method of this layout is setactiveitem. Because only one sub-Panel can be displayed at a time, the only way to switch the sub-panel is to call the setactiveitem method, which accepts a sub-panel ID or index as a parameter. The card layout does not provide a sub-panel navigation mechanism, and the navigation logic needs to be implemented by developers themselves.

• Anchor (Anchor)

Ext. layout. Container. Anchor is the layout for positioning the sub-panel contained by the container size. The name of the corresponding panel layout configuration item is anchor. If the container size changes, the positions of all sub-panels are recalculated based on the rules and automatically rendered. Pay attention to the use of the following configuration items when using the anchor layout.

Anchorsize (provided by the parent container)

Anchor (provided by container)

• Absolute (absolute location layout)

Ext. layout. Container. Absolute: the name of the panel layout (layout) configuration item is absolute. It can be located based on the x/y coordinates configured in the sub-panel.

• Checkboxgroup (check box group layout)

Ext. layout. Container. checkboxgroup check box group layout. The name of the corresponding panel layout configuration item is checkboxgroup. It provides the following functions: Ext. Form. checkboxgroup and Ext. Form. radiogroup.

• Column (column layout)

Ext. layout. Container. column corresponds to the name of the layout configuration item in the panel layout. This is a layout style of one or more columns. The width of each column can be set based on the percentage or fixed value. The height can be changed based on the content. It supports a special attribute columnwidth, you can use the columnwidth configuration item to specify the percentage or use the width configuration item to specify a fixed value to determine the column width.

The width configuration item is a fixed width in pixels and must be a number greater than or equal to 1. The columnwidth configuration item is the relative width in percentages. It must be a sales value greater than 0 and less than 1, for example, ". 25 ".

• Table (table layout)

Ext. layout. Container. Table corresponds to the name of the layout configuration item in the panel layout. This layout allows you to easily render content to HTML tables. You can specify columns, rowspan, and colspan to create complex table la S.

Note: you must use the configuration object to configure the layout, instead of using only strings. The table layout has two configuration items: columns and tableattrs. Its Sub-panel has two configuration items: rowspan and colspan.

• Border (border layout)

Ext. layout. Container. Border: the name of the layout configuration item corresponding to the panel layout is border. The layout contains multiple sub-panels and is an application-oriented UI layout. It divides the entire container into five parts: East (East) and south (South), west, north, and center ). To add the Sub-panel to the container, You need to specify the region configuration to inform the container to add the Sub-panel, and the layout also has built-in support for panel separation bar.

Note:

1. Any container that uses the border layout must have a child element configured as region: 'center' to occupy the central position. This child element will be filled with the remaining space of the layout.
2. Any child element occupying the West or East position must specify the initialization width, flex value, or percentage string. The flex value of the center is 1.
3. Any child element occupying the north or south position must specify the initialization height, flex value, or percentage string. The flex value of the center is 1.
4. After rendering, the border layout does not allow the dynamic addition or deletion of child elements. If necessary, you must use an additional packaging container.

• Box (Box layout)

Ext. layout. container. the box layout is divided into two child classes: hboxlayout (horizontal box layout) and vboxlayout (vertical box layout). The layout divides the space of the parent container by using the flex configuration item of the child element.