Talk about the components of Ext JS--Container and layout

Overview

In the page, the tricky part is the layout. and to implement the layout. You have to have a container that can maintain the layout.

To be able to say, in the JavaScript framework I've tried and used, the Ext JS layout is the best one, thanks to its powerful container class and rich layout classes. In this article we will introduce the container combination and layout class of Ext JS.

Container: Ext.container.Container

The primary function of a container is to manage its internal components. Thus on the basis of inheriting all functions of the ext.component. Added the appropriate methods for handling internal components Add, insert, remove, and removeall.

In the Configure Item method, the items configuration item is added to the internal components, and the layout configuration item is added to define the layouts.

Because the container does not change the render mark of the Ext.component, the container is still a div. is a light weight container.

Now consider such a problem. Let's say I want to define 10 buttons in a container so that I define 10 button configuration objects in the container's items. When defining these button configuration objects, some code is the same, such as "xtype: ' button '", then I have to copy and paste 9 times. Do you think it is annoying? In order to solve the problem. The DefaultType configuration item was specifically added to the container. Used to specify the type of the default component within the container. Suppose there are no special settings. By default, the panel (Ext.panel.Panel) is used as the default component. Now, the default component is conquered, but what if there are the same configuration items? This can be achieved by defaults configuration items.

Component Query

Since the container manages its internal components, how to find the components becomes the desired function. In the container, the function of component query is added to the container by mixing Ext.mixin.Queryable.

In ext JS 3, the ext.getcmp method is introduced to query components based on the ID of the component, but for repeated use of views and large project development, ID collisions are often caused. Thus, the Itemdid and component query classes (ext.componentquery) are introduced in Ext JS 4.

You want to find the component based on Itemid. You must first find its parent container, since Itemid is scoped to its immediate parent component, that is. In other containers. You can define the same itemid. This will not cause an ID conflict, but you should pay attention when querying. Assuming that you are not querying itemid within a direct parent component, you may find a component that is not the container you need, and it is very likely a component of another container, so to use the Itemid query component, you might want to query through a direct parent component.

Component query classes are somewhat similar to DOM queries, and can be found by component IDs, ItemId, types, and attributes with wildcards. In the Ext.mixin.Queryable class, 7 component query methods are added to the container, and the most common part of our development is the down method, which is used to find the first subassembly that conforms to the selector passed to the method.

Component query Although very convenient and very flexible, but assume that the internal components are very many times, there may be performance problems, thus, in the Ext JS 5. Matches the view controller, introducing the reference configuration item, which can be used to find components in the view controller using Lookupreference. Because the cache is created for the component that defines the reference configuration item in the view controller, it is fairly fast to query, and it is recommended to use reference more. Detailed information about the reference. Can read the

p=313 ">" translation "in ext JS 5 use Viewcontrollers" article.

Layout

The layout is tightly connected to the container, even if the configuration item layout is not defined within the container. The container also uses the default layout to render the layout, for example, executing the following Ext JS code on an empty page to create a 800x800 empty container:

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

You will see the following THML code in the Firebug HTML panel:

<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 the HTML code, the outer layer of code is the div tag of the container. The two-tier div is the div tag for the layout.

Suppose you have doubts about the above code. The ability to look at the default layout of the container-the class definition file of its own active layout (Ext.layout.container.Auto), find the Rendertpl property within the file, and see the rendering template of its own active layout. Check the HTML code of the template to see if it is the HTML code for the layout.

It's important to note that. Similar adaptive layout or card layout This layout, there is no layout code, because these layouts directly in the container components of the top-level div size can be adjusted to the size of the container, no need to assist the HTML markup to calculate the layout, and the internal components of the internal component layout is calculated through his internal layout, It is not involved in the parent container.

The above is a very good way to understand and familiarize yourself with the layout. You can change the layout of the container, and then look at the HTML code generated in the Firebug to see how they relate to the container and how the layout is implemented, which deepens the layout, while using the layout. You will be able to see what kind of HTML code they will generate and what kind of effect it will have.

Like what. Using a horizontal box layout and a column layout can divide the container into columns, assuming that you understand how they are implemented, you will find that the column layout is "Float:left" to divide the columns, that is, subcomponents are stacked up first. Then the second row of the way to achieve. The horizontal box uses absolute positioning (Position:absolute!important;) to divide the columns, which means that the sub-components of each column are fixed within the DIV element of their column. These two different implementations also determine how the subcomponents behave differently, because the sub-components in the column layout use "Float:left". It will be very easy to be affected by the size of the sub-components, extremely easy on the right side of the container blank, it takes a lot of effort to adjust the size of the container or sub-assembly of the ability to obtain good results, which will be self-actively according to the browser sizing container. It's definitely not a good choice. There is no such problem with the horizontal box layout. Because the location is fixed, and the layout is self-adjusting. The only downside to the horizontal box layout is that the input field is placed inside the layout, and you want the field to navigate through the TAB key. You will see that the field is toggled before jumping to the second column before switching to the first column. The reason for this is that the switch in focus in the browser is the first to switch the child elements within a top-level element. Then switch to a sub-component of the top-level element. This solution is also very easy. Define the TabIndex for the field.

Summary

The container is actually a very easy component, but its binding layout is a complex thing, especially when configuring the layout, some layout, just need to make a simple definition within the container, such as adaptive layout and card layout, and some layouts need to have a corresponding definition within the subassembly, such as border layout, resulting in some confusion, but the assumption is familiar with the implementation of various layouts and detailed features. Can be very easy to deal with the various types of page layout. In the next article, the usage of the various layouts is described in detail.

Please respect the author's hard work, without consent. Please do not reprint this article, after all, the reader's support is the author's motivation to write articles.

Talk about the components of Ext JS--Container and layout