Let's talk about Ext JS components-how to use layout 2. extjs

Let's talk about Ext JS components-how to use layout 2. extjs
Absolute layout (Ext. layout. container. Absolute)

Absolute layout reminds me of the time when Foxpro was used for development. The interface layout was like this, which was implemented by setting the coordinates (x, y) and width in the upper left corner of the control, because the height of the input control is basically fixed, you do not need to set it. Before Visual Programming appeared, it was a hard task to develop the interface, because layout required a lot of effort. For example, if you want to insert a component into a defined component, you have to re-Modify the coordinates of the components below the insert position, which is boring. Therefore, you should select this layout mode if necessary.

The absolute layout is implemented using the absolute position (absolute) of CSS. Therefore, you need to define the coordinates, width, and height in the upper left corner of the Child component. In CSS, the absolute definition uses left and top to define the coordinates in the upper left corner. In Ext JS, it is converted to the used x and y instead. Width and height can be defined by width and height, or anchor. The advantage of using anchor is that the sub-component will adjust the size of the sub-component according to the container size change, so as to ensure that only the part of the sub-component can be displayed when the container size is small, when the container is large, a blank area is displayed.

There are also three ways to use anchor to define the width and height. One is to use percentages, for example, "90% 95%". Here, the width of the sub-component is 90% of the container width, the height is 95% of the container height. One is to use the offset, such as "-20-5". Here, the right boundary of the sub-component will be the right boundary of the cheap container-20 pixels, that is, the two borders are 20 pixels apart, and-5 indicates that the bottom boundary of the Child component is 5 pixels apart from the container boundary. If you use a positive value, the sub-component display will exceed the container, and this setting is rarely used. The last method is to mix the preceding two methods, that is, the width is expressed by percentage, the height is offset, or the width is offset, while the height is expressed by percentage. If the height of the sub-component is fixed, you can set only one value in the preceding three methods, that is, to set only the width of the sub-component.

Anchor)

The anchor layout is the default template of the form panel, so it is a common layout. Its advantage is that child components can be adjusted according to container size changes. When the anchor layout is used in the form panel, you can avoid entering a component length that exceeds the access to the form panel when the form panel is small. When the form panel is larger, no blank space is left.

To use the anchor layout, in addition to defining layout as "anchor" in the container, you also need to use the anchor configuration item in the child component to define the height and width of the Child component. The use of the configuration item anchor is the same as that of the anchor configuration item in the absolute layout.

Column layout (Ext. layout. container. Column)

When Ext JS 2 has no horizontal box layout, column layout can only be used for column partitioning. Column Layout is rarely used since horizontal box layout is available. However, salted fish and cabbage have their own preferences. Achieving the desired results is the ultimate goal.

To use column layout, in addition to defining layout as "column" in the container, you also need to define the width in the child component. There are two ways to define the width. One is to define the width directly. This method does not mean that the width is fixed and cannot be adjusted as the container changes; the second method is to use columnWidth and set the column width by setting the percentage (expressed by decimal number). The advantage of this method is that the column width can be adjusted as the container size changes.

Accordion layout (Ext. layout. container. Accordion)

Accordion is also a common layout. It is derived from the vertical box layout, which is similar in principle. It divides the Vertical Container into several areas, and only one area is expanded to display the title and content, in other regions, only the title is displayed. Of course, the accordion layout can also display multiple expanded areas at the same time. In this case, set the multi configuration item to true in the configuration object of layout.

Because the accordion layout needs to display titles, instead of creating such titles, it only uses the titles of the container class. Therefore, when using the accordion layout, the child widget must be a container class with a title that can be folded, such as a panel, a form panel, or a tree panel.

To use the accordion layout, you only need to define layout as "accordion" in the container. If you prefer that the activity panel is always in the container definition, you can set activeOnTop to true in the configuration object of layout. By default, the collapse of a panel can only be achieved by clicking the collapse button of the Panel. If you want to click the title bar to fold, you can set titleCollapse to true in the configuration object of layout. If you want to display the animation when switching, you can set the animation to true. If you want to hide the collapse button in the panel title, you can set hideCollapseTool to true. In this case, titleCollapse is automatically set to not true.

Form layout (Ext. layout. container. Form)

The form layout is similar to the anchor layout, which allows the child component to adjust the size of the child component as the container size changes. However, this is only limited to input fields, so it is generally only used for containers with only input fields. Unlike the anchor layout, the anchor configuration item does not need to be defined in the child component.

For input fields, the form layout and the anchor layout are implemented in the same way. They all implement effects through styles. In the input field's encapsulated DIV, the style "display: table;" is used ;", that is to say, the behavior of the DIV is the same as that of the HTML table. For the label and input box of the input field, the style is "display: table-cell ;", it is equivalent to dividing the input field's encapsulated DIV into two columns in the table. One column shows the label, and the other column shows the input box. Because the table automatically follows the size change of the parent container and adjusts its size, the child component automatically follows the size change of the container. The difference between the form layout and the anchor layout is that the form layout does not calculate the width of the input field's encapsulated DIV, and is directly set to not 100%, the anchor layout calculates the width and height of the encapsulated DIV according to the settings. This is also the reason why any child component can be used in the anchor layout, and only the input fields can be used in the form layout, because the anchor layout can calculate the width and height of the Child component according to the settings, the form layout does not. If a component of the non-input field class is used in the form layout, because there is no calculation process, it means that the automatic layout is used, and the size of the child component is what by default, no adjustment will be made, and the table feature of the input field does not need such calculation to be correct.

To use form layout, you only need to define layout as "form" in the container. Use labelWidth to set the label width of the input field.

Table layout (Ext. layout. container. Table)

TABLE layout is implemented by using the TABLE element. Therefore, it is generally not recommended to use other la s to achieve the effect.

To use table layout, in addition to defining the layout type as a table, you also need to use columns to define the number of columns of the table. To define table properties, you can use tableAttrs configuration items; To define row properties, you can use trAttrs configuration items; To define cell properties, you can use tdAttrs configuration items.

Unless otherwise specified, the container writes the child components to the first part of the table according to the definition order of the child components. For example, two columns and three child components are defined, the first child component is rendered in the first column of the first row of the table, the second child component is rendered in the second column of the first row, and the third child component is rendered in the first column of the Second row. To implement cross-column, you can use the colspan configuration item in the child component to declare cross-column. To cross-row, use the rowspan configuration item. To define the cell id, use the cellId configuration item. To define the cell style, use the cellCls configuration item.

Summary

When using Ext JS, most of the display errors are caused by incorrect layout. Therefore, it is very important to be proficient in layout. To be proficient in layout, the best way is to understand how various la s are implemented on pages and the features of these implementations, so that you can understand the layout, you are not afraid to use the wrong layout.

The Panel is described below.

Please respect the author's hard work and do not repost this article without your permission. After all, the reader's support is the motivation for the author to write the article.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.