Layout layouts for "ExtJS"

　　Layouts are used to define how the container organizes inner child elements and controls the size of child elements.

There are two types of layouts in ExtJS: The Container container class layout and the component component Class layout.

Containter Container Class layout: Responsible for container content ExtJS elements and resizing extjs elements.

Includes: Border layout, box layout, fit layout, and more.

Component Component Class layout: An HTML element that is responsible for organizing components.

Includes: Dock layout, toolbar layout, field layout, Triggerfield layout.

　　First, Containter layout:

Let's take a look at the hierarchical relationship of the Containter layout first:

　　

　　1. Auto layout:

The auto layout is used by default when no layout configuration items are configured for the container (container or its subclass instances).

Features: (1)Container Sub-elements do not change with the size of the container;(2) Container child elements are arranged from top to bottom in the order they are added to the container.PS:When you set the width in percent, the width is the corresponding percentage of the container's width, but when you run in Chrome, the width is set to a percentage with no right border exception.　　　 2, Anchor layout: 　 　　　　Features: (1)The container sub-elements will vary with the size of the container;(2) Sub-elements in order to add to the container, top-down arrangement; (3) The default width of the child element is the body width of the container, and (4) The child element's X, y configuration items can set the left and top margins of the child elements from their original positions.

When the layout of the container is set to anchor, it is necessary to configure the child element's anchor configuration items when you want to customize the placement of the child elements.

Configuration items:

(1) A negative number indicates the distance of the child element from the right inner border and the lower inner border of the parent container;

　　　　　　(2) A positive number indicates the distance of the child element from the left inner border of the parent container and the top inner border;

(3) percent indicates the percentage of child elements to the width and height of the parent container;

(4) Numbers and percentages can be mixed.

　　3, Absolute layout:

　　　Absolutelayout is a subclass of Anchorlayout, which inherits all the attributes of Anchorelayout. And you can set the X and Y configuration items to position child elements relative to the parent container.

Features:(1)The container sub-elements will vary with the size of the container;(2) The default width of the child element is the body width of the container, (3) The default position of the child element is the upper-left corner of the container (x:0,y:0), when the x, y configuration items are not set for each child element, all child elements overlap in the upper left corner of the container, and (4) the child elements are set The distance of the element from the left inner border of the container and the top border.PS:The Anchor property of the child element, and the final value of each child element when the percentage value is used for height is " percent * The remainingheight of the parent container, the remaining height of the parent container = the height of the parent container-the height of the child element that was added earlier to the container . So the order in which the child elements are added to the container will work when the anchor attribute height is set using percentages. 4. Hbox layout and VBox layout:　　The hbox layout is similar to the VBox layout, except that the former is used to organize the layout of the child elements horizontally within the container, while the latter is a vertically oriented layout. Features:　　　　(1) The container sub-elements will vary with the size of the container; (2) The width and height of a child element relative to the container is organized by three optional configuration items. Configuration items:(1)Flex: Child element Configuration item. The flex configuration items of each child element interact to determine the width (HBox) or height (VBox) of the child element within the container. In VBox, for example, the flex of child element 1 is 1, and the flex of child element 2 is 2, and the container height is 90, then the height of child element 1 is 30, and the height of child element 2 is 60,hbox. (2) Align:layout property configuration item. Sets the alignment of the vertical direction of each child element, with the optional values: Left: Default, aligned to the right; center: centerline aligned; Strech: Causes the individual child elementswidth (HBox) or height (VBox)For the container body.width (HBox) or height (VBox)to align; Strechmax: With the widest child element.width (HBox) or height (VBox)As the other individual child elementswidth (HBox) or height (VBox)To align. (3) Pack:layout property configuration item.               　　   Sets the block of elements consisting of all child elements that are immediately to the left, center, and right of the container, with the optional values: Start: Default, on the left side of the container; centre: by the middle; End: On the right side of the container. 　　 5, accordion layout:The accordion layout is a subclass of the VBox layout. 　  　　Unlike the VBox layout, the accordion layout only shows one of the child elements and the remaining child elements are folded up. Features: (1)The container sub-elements will vary with the size of the container;(2) Only one of the child elements is shown, and the remaining child elements are folded up or only part of the child element is displayed and the other elements are collapsed. Configuration items: (1) The properties of the Multi:layout configuration item. By default, false,true indicates that multiple child elements can be present, (2) Collapsefirst: The configuration item for the child element. The default is false,false to indicate that the Expand/collapse button is on the leftmost side of the Caption tool button Bar, and True indicates the last edge. (About the Title Tool button Bar Ext.panel.Tool we will learn later) (3) Animate: A configuration item for a child element. The default is true,false to perform a expand/collapse operation when there is no animation effect (4) Fill:layout The properties of the configuration item. The default is true,true to indicate that the child element height of expand will be the entire container remaining height, false to indicate the height of the child element height of expand 6. Table layout:With the table layout, the table label for the HTML is generated as a container for the layout. Features: (1)configuration allows you to set whether the size of a container's child elements varies with the size of the containerConfiguration items: (1) Columns: Sets the number of columns for the table layout, (2) Tableattrs: Sets the properties of the table (such as style, etc.) (3) Trattrs: Set the properties of the row (4) Tdattrs: Set　　　　　　Cell properties (5) Colspan: Sets the number of cross-columns (6) RowSpan: Sets the properties for layout configuration Items 1, 2, 3, and 4 across rows, 5, 6 for the configuration items of child elements. Note: The order of the child elements is from left to right, top to bottom. 7. Column layout:The column layout is a subclass of the auto layout that sets the width of the child elements. Features: (1)the width of the container's child elements varies with the width of the container;(2)the height of the container sub-element does not change with the height of the container;Configuration item: ColumnWidth: Child element configuration item. Sets the width of the child element (the value must be a percentage or a decimal less than 1). 8. Fit Layout:The Fit layout is the only child element that can be displayed within a container, and if multiple child elements are set, only the first child element is displayed.          　　Features: (1) Only one child element can be displayed in the container, and if multiple child elements are set, only the first child element is displayed. (2) The container sub-elements change with the size of the container. 9. Card layout:The card layout is a subclass of the fit layout. Features: (1) Only one child element can be displayed in the container, if multiple child elements are set, only the first child element is displayed, (2) The other child elements can be shown by setting the Setactiveitem method, and (3) the container child elements vary with the container size. 10, Border layout:The border layout divides the container into five areas: North, South, east, west, and center. In addition to the center is required, the rest are optional. You do not need to set the height and width of the center, the browser will be based on the height of the workspace minus North, south, West, east of the high width, with center filled with the rest of the space. 11. Form layout:The form layout arranges all of the input boxes in the form in a vertical order, and the width is equal to the width of the container.　　　　With respect to the column layout, the form layout is vertical from top to bottom, and the column layout is horizontal from left to right. Features: (1)The width of the inner child element is the width of the container body, and varies with the size of the container;(2) The padding attribute belonging to the inner child element under the Ext.form.field package will be invalidated. 　　 Second, component layoutThe component layout is responsible for organizing the HTML elements inside the component. Toolbars, headers, and fields in the form are applied to. 1. Dock layout:The main application is on the Panel class component. The layout is set up inside the component and used in the headers and toolbars of the panel. 2. Tool layout:The Ext.panel.Header contains 0 to n instances of Ext.panel.Tool a.　　　　These Ext.panel.Tool instances are organized by the tool layout to organize their relationships. The EXT framework provides 25 types of Ext.panel.Tool to set up Ext.panel.Tool instances through the Ext.panel.Panel tools configuration item.　　　　One thing to note is that the Ext.panel.Tool provided by the EXT framework contains only button icons and the specific Click event handlers need to be customized. Implementation results: 3. Field layout:Form layout. 4, Trigerfield layout:The Triggerfield layout is an extension of the field layout. Combox, DatePicker and other components are used Triggerfield layout.

Layout layouts for "ExtJS"