Talking about the components of Ext JS--How to use the layout

Overview

In Ext JS, there are two types of layouts: Component class layout and container class layout. Because some components are composed of different components, such as fields consisting of headings and input boxes, there is a layout relationship between them, which requires the component class layout to handle their own unique layout relationships within the component. If we do not define our own components, we do not need to use the component layout, we know. This article mainly introduces the container class layout, because this is bound to be used in the development.

Note: In Ext JS, the field has a two-layer meaning. The field that is said in the model is the same as the field in the database. The second level of the field means the input component in the form, which we should be careful to distinguish.

Automatic layout: Ext.layout.component.Auto

This is a good understanding, that is, there is a plate to put things, you put things in, what the original is what it looks like. If the basin can be enlarged or shrunk, what is already in the basin will not change with the change of the basin.

This layout is the default layout for the container. In general, it is not recommended to use automatic layout, because this user experience is too poor. You just have to know that there is such a layout on the line.

Border layout

Border layout is a relatively common layout, generally applied to the overall layout of the interface. Its greatest feature is the pre-defined 5 regions of South (southern), north, east (east), West and Center (center), which are optional in addition to the intermediate areas . In ext JS 4.1 and later versions, in addition to the intermediate area must be unique , you can also place any number (can also be 0) the same area. Here are some examples to look at the border layout.

The following code creates a border layout view that contains 5 zones, using the default configuration, within a 400x400 container:

Ext.create (' Ext.container.Container ', {renderTo:Ext.getBody (), width:400, height:400, layout: ' Border ', ite        ms:[{region: "North", HTML: ' North '}, {region: ' South ', HTML: ' South '}, {region: ' Center ', HTML: ' Center '}, {region: ' West ', HTML: ' West '}, {region: ' East ', HTML: ' East '}]}); 12345678910111213

After the container is rendered, you can see the effect shown on the page:

650) this.width=650; "src=" Http://www.extjsui.com/wp-content/uploads/2015/06/1.png "alt=" 1 "class=" aligncenter Size-full wp-image-401 "height=" 407 "width=" 407 "/>

As you can see from the code, to use a border layout, you define the container's layout configuration item as border, or you can use the following definition:

layout:{type: ' Border '}123

The settings for each region are set by the region configuration item in the container's subcomponents, and the value of the zone is the English word in the cardinal and the other.

If a region has only one subcomponent, then the area definition of the subassembly is not ordered, such as defining the North before defining the West, as long as the region configuration item is defined. The only rule to be mastered is that the intermediate areas must be and are unique .

If an area has more than one subassembly, be aware of the definition order, the sub-components defined in the area are displayed before, and after the definition is displayed, such as two sub-components defined in the area north, in items, defined in the top, and the definition is shown below.

Weight

In the illustration above, you can see that the east-west area is contained between the North and South regions, and if I want the north and South regions to be included between the east and West regions, what should be handled? This can be done by setting the weight value of the area. The default weight values for each zone are as follows:
* North:20,
* South:10,
* center:0,
* West:-10,
* East:-20

From the default weight value can be seen, the weight of the priority to get the container space, and the weight of the small can only wait until the other points.

There are two ways to modify the weights of a zone, one is to define the layout configuration item by using the Regionweights configuration item in the layout configuration object, and the other is to define it using the weight configuration item in the subassembly. For example, if you want the north and South regions to be placed between East and West regions, you can define:

layout:{type: ' Border ', regionweights:{west:30, east:30}},1234567

If you have multiple subcomponents in one area and you want one component to be outside of another, and one of the components is not defined in this way between other components, you must use the weight configuration item in the subcomponents to define it, for example, add the following code to the items in the example above:

{region: ' North ', HTML: ' North2 ', Weight: -30},1

In the code, the North District subassembly with the content of North2 has a weight of-30, so it will be between the east and West regions, with the final effect such as:

650) this.width=650; "src=" Http://www.extjsui.com/wp-content/uploads/2015/06/2.png "alt=" 2 "class=" AlignCenter Size-full wp-image-403 "height=" 401 "width=" 405 "/>

The design of the weight of the border layout of the design more flexible, it can be said that the current popular main interface layout, basic can be used to design the border layout.

Splitter bars (split bar)

In our common Windows applications, it is common to change the size between two regions by splitting the bars, such as the navigation area and the file list area in the Explorer, and you can change the size between the two regions by splitting the bars. In Ext JS, of course, this function is not less, and in the border layout, is implemented by the functional component Ext.resizer.BorderSplitter, whose parent class is Ext.resizer.Splitter, and Ext.resizer.Splitter is derived from ext.component. The function of Ext.resizer.BorderSplitter is to render a splitter bar between regions, and to bind the mouse drag events, to recalculate the size of the area when the mouse creates a drag event, and to adjust the position of the splitter bar, thus simulating the effect of dragging.

To use a splitter bar, you can simply add a split configuration item to the definition of the subassembly, but the splitter bar cannot be applied to the middle area . The reason is simple, in the middle area there are 4 and other areas connected to the edge, if you define the split bar in the middle area, whether it is 4 edges are rendered splitter bar, or only one of the rendering? If only one of them is rendered, which one should be rendered? In other areas there is no problem, just render the side adjacent to the middle area. The rule is also applicable for cases where there are multiple sub-components in the same region.

In general, split bars can be used when split is set to true. If you want to set up the splitter bar in more detail, you can use the configuration object to set it, such as the default background color of the split bar is too bad, I want to use red as its background color, you can set this:

Split: {style: ' background:red; '} 123

You can refer to the API documentation for the Ext.resizer.BorderSplitter, as this splitter bar is an instance of the class, with the specific configuration items available for the splitter bar. If it is clear that Ext.resizer.BorderSplitter is a component class, which of the class has what configuration items can be used, the heart is probably a few, in addition to which private configuration items need to consult the API, the rest of the basic is the ext.component configuration.

To be Continued ...

Please respect the author's hard work, without permission, please do not reprint this article, after all, the reader's support is the author of the power of writing articles.

Talking about the components of Ext JS--How to use the layout