About Ext JS components-containers and layout, and extjs Components

About Ext JS components-containers and layout, and extjs Components
Overview

In the page, the most tricky part is the layout. To achieve the layout, you must have containers that can maintain the layout. It can be said that in the Javascript framework I have tried and used, the layout of Ext JS is the best, thanks to its powerful container class and rich layout class. This article introduces the Ext JS container combination and layout class.

Container: Ext. Container. container

The main function of a container is to manage its internal components, so it inherits Ext. based on all the functions of Component, add, remove, and removeAll methods used to process internal components are added. In the configuration item method, the items configuration item is added to add internal components, and the layout configuration item is added to define the layout.

Because the container does not change the rendering tag of Ext. Component, the container is still a DIV, a lightweight container.

Now, if you want to define 10 buttons in the container, You need to define the configuration objects of 10 buttons in the items of the container. When defining the configuration objects of these buttons, some codes are the same, such as "xtype: 'click'". Then I have to copy and paste them nine times. Isn't it annoying? To solve this problem, the defaultType configuration item is added specifically in the container to specify the default component type in the container. If no special setting is set, the Panel (Ext. panel. panel) as the default component. Now, the default component is fixed, but what if the same configuration item exists? This can be achieved through the defaults configuration item.

Component Query

Because the container needs to manage its internal components, how to find components becomes the required function. In the container, the component query function is added to the container by mixing Ext. mixin. Queryable.

In Ext JS 3, Ext. the getCmp method is used to query components based on the component id. However, duplicate views and large project development usually cause id conflicts, itemdId and component Query Class (Ext. componentQuery ). To search for a component based on itemId, you must first find its parent container, because the scope of itemId is within its direct parent component, that is, in other containers, you can define the same itemId, which does not cause id conflict. However, you must note that if you do not query the itemId in the parent component, it may not be the component of the container you need, but it may be another component of the container. Therefore, to use the itemId query component, you 'd better query it through the parent component directly.

The component Query Class is similar to DOM query. You can use the component id, itemId, type, and attribute to search for components with wildcards. In Ext. mixin. in the Queryable class, seven component query methods are added to the container, and the most common method in our development is the down method, this method is used to find the first child component that matches the selector passed to the method.

Component query is very convenient and flexible, but if there are many internal components, there may be performance problems. Therefore, in Ext JS 5, it matches the View Controller and introduces the reference configuration item, you can use lookupReference in the View Controller to find components. Because the View Controller creates a cache for the component that defines the reference configuration item, it is quite convenient to query. We recommend that you use reference more. For more information about reference, see [translation] Using ViewControllers in Ext JS.

Layout

The layout is closely linked to the container. Even if no configuration item layout is defined in the container, the container uses the default layout to render the layout. For example, run the following Ext JS Code on an empty page to create an empty container of 800 × 800:

Ext.create('Ext.container.Container',{    renderTo: Ext.getBody(),    width:800,    height:800});

The following THML code is displayed in the HTML panel of firebug:

<div id="container-1009" role="presentation" style="width:800px;height:800px;" class="x-container x-container-default x-border-box">    <div role="presentation" class="x-autocontainer-outerCt" data-ref="outerCt" id="container-1009-outerCt" style="width: 100%; table-layout: fixed; height: 100%;">        <div class="x-autocontainer-innerCt" role="presentation" style="" data-ref="innerCt" id="container-1009-innerCt">        </div>    </div></div>

In HTML code, the code at the outermost layer is the DIV tag of the container, while the DIV at the two layers inside is the DIV tag of the layout. If you have doubts about the above code, you can check the container default Layout-Automatic Layout (Ext. layout. container. in the class definition file of Auto), you can find the renderTpl attribute in the file to see the rendering template of the automatic layout. Compare the HTML code of the template to see whether it is the HTML code of the layout.

Note that there is no layout code for a layout similar to Adaptive Layout or card layout, because these la s can directly adjust the size of the top-layer DIV of the component in the container to the size of the container, and do not need to add HTML tags to calculate the layout, the internal component layout of the internal component is calculated through its internal layout, and does not involve its parent container.

The above is a good way to understand and familiarize yourself with the layout. You can change the layout of the container, and then view the HTML code generated by the layout in firebug to understand the relationship between the container and the layout implementation method, which can deepen the understanding of the layout, when using the layout, you can know what HTML code they will generate and what effect they will produce. For example, you can use horizontal box layout and column layout to divide containers into several columns. If you understand their implementation method, you will find that the column layout is implemented through "float: left "is used to divide columns, that is, sub-components are first stacked with one row and then stacked with the second row. The horizontal box uses absolute positioning (position: absolute! Important;) to implement column division, that is, the child components of each column are fixed within the DIV element of their column. The two different implementation methods determine that the behavior of child components is different. Because the sub-components in the column layout use "float: left ", it is very easy to be affected by the size of the sub-component. It is extremely easy to appear blank on the right side of the container. It takes a lot of effort to adjust the size of the container or sub-component to achieve a good effect, this is definitely not a good choice for containers that automatically resize according to the browser. This problem does not occur when horizontal box layout is used, because the location is fixed and the layout is automatically adjusted. The only bad thing about horizontal box layout is that when you place an input field in the layout and want the field to be navigated by the TAB key, you will find that the field is switched to the second column only after the first column is switched. This is because the focus switch in the browser is to switch the child elements in one top-level element first, and then switch to the child components of another top-level element. This solution is also very simple, define tabIndex for the field.

Summary

The container is actually a very simple component, but its bound layout is a complicated thing, especially when configuring the layout, some la s, you only need to make some simple definitions in the container, such as adaptive layout and card layout. Some la s need to be defined in the child components, such as border layout, this may cause some confusion, but if you are familiar with the implementation methods and specific features of various la S, you can easily cope with various types of page la S. In the next article, we will introduce how to use various la S.

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.