Let's talk about Ext JS components-Component base class: Ext. Component

Let's talk about Ext JS components-Component base class: Ext. Component
Overview

Ext. Component is the base class of all Ext components, which is mentioned in the first sentence of Ext. Component API. The second section describes the basic functions of the function: Hide/display, enable/disable, and size control. In addition to the above basic functions, there are actually a lot of things. Of course, it is impossible to cover all aspects of the API. So how should we understand this component base class?

Ext. Component === DIV

If you render an Ext. Component to the page, you can see that this Component simply adds a DIV tag to the page, which is so simple. That is to say, Ext. Component is equivalent to a DIV tag. So what can I do with this question? If you simply use a DIV tag in the page, we can let it display the content, or use it to build the page layout with other DIV tags. In general, is to let it do what you want to do.

Since a DIV tag can do so many things, how can you implement what you want in Ext. Component?

Display content

There are two ways to display content in a DIV: one is to directly add the content to the DIV for display, the other is to find the DIV tag, and then add the content to the DIV tag. If you are the designer of Ext. Component, how do you implement these two methods? Generally, the first method writes the content to a variable, and then combines the DIV tag and content into a string for output, the second method is to use the DOM operation to obtain the element first, and then use the innerHTML attribute of the element to write the content into the DIV tag.

The above is the implementation method without using any javascript framework, but how to implement the class that can be used only after Ext. Component is instantiated? If you are familiar with class design, the first method must be to bind the content to the attribute during class instantiation, and then combine strings in the class for output, the second method is to provide a method for operation. Therefore, in order to be able to process these two methods, Ext. Component must provide an attribute to store the content during initialization and a method to process content updates. The HTML configuration items and update methods are implemented in Ext. Component.

Note: configuration items (Config options) are strictly attributes, but in Javascript, You need to distinguish which attributes are allowed for initialization and which attributes are not allowed for initialization, especially for attributes such as read-only attributes, it is not easy to distinguish them. If they are not differentiated in the API, the probability of errors will be increased, therefore, the exclusive name of the configuration item is added to the API to show the difference.

Of course, for the frameworks that encapsulate the underlying DOM operations and provide templates, these two operations will not be implemented using such simple implementation methods. Therefore, do not consider what I am talking about as the implementation method of Ext. Component. Here, you only need to understand its basic implementation ideas. The Ext. Component implementation of these two methods is quite complex, and the complexity is mainly in the rendering process. This rendering process is implemented through the Ext. util. Renderable class, which is mixed into the Ext. Component through mixins. In this Ext. util. Renderable class, HTML code rendering is mainly implemented by templates and Ext. DomHelper. If you are interested, you can study it on your own and won't go into depth here.

Style

For the DIV tag, the indispensable part is to define a style or style class for it, and this is the same as the idea of the content. Therefore, it is necessary to provide the corresponding configuration items and methods, there are style and cls configuration items and addCls, removeCls, and setStyle methods. As to why style classes are split into two methods, style has only one method. I only know that style classes often need to be added or removed in Ext JS components, it is more convenient to use two methods. In fact, there is still the third method replaceCls, but as for why the style is only the setStyle method, the specific reason is not expected for the moment.

Dimensions

Controls the size of the DIV tag to control the visible range of the DIV tag. Therefore, this function is required.

Scroll bar

When the DIV tag is fixed, the content may exceed the visible area. At this time, you want to display the scroll bar, let the user scroll to view the content, or do not display the scroll bar, ignore unnecessary content directly? This is also worth considering.

Hide/show

The display and hiding of DIV is also frequently used and therefore needs to be implemented.

Enable/disable

This is useful when the DIV tag is used to implement the button function.

Simplified style settings

A div tag has many configurable attributes. If some attributes need to be used frequently, how can we simplify the input of these attributes? Is it impossible to always use style configuration items? The solution is to directly input configuration items, such as padding, margin, border, and tabIndex.

Id

When it comes to simplified style settings, you have to mention the id. You can set an id for the DIV tag to quickly obtain the DIV element for operations. For the component, the value set by the id configuration item can be used as the id of the component in addition to the element id of the last night, so it has a dual effect. But setting too many IDs is not a good thing, because it is easy to cause id conflicts, so use them with caution. Another alternative method is itemId. However, in Ext JS 5 and 6, a better reference can be used. This article introduces the knowledge of id-related component query.

Floating DIV

Many websites can see floating elements, such as floating sidebar and pop-up window. For a framework, this is certainly not a small one, after all, this function is required for Windows and Framework Information windows. To separate the Floating function from the basic functional area for easy maintenance, the framework integrates the Floating function into the Ext. util. Floating class, and then integrates the Floating function into the Ext. Component class.

Animation

Frames with animation functions are dazzling and essential. Ext. Component is implemented by mixing Ext. util. Animate.

Event

There is no need to say this for events. How can this problem be missing. Note that the Framework contains two types of events: browser events and internal events.

Browser events refer to events generated by users and page exchanges. dom. implemented by ElementEvent, in the use of Ext. dom. when you perform DOM operations on an Element, You can bind or release the event to the Element. The essential function of the Ext. Component is DOM operations. Therefore, you can use Ext. dom. Element to process browser events.

Internal events refer to events generated within the Ext JS framework. For example, if the storage (Store) loads data, it must notify the component to update the display, and this must be handled through internal events. It is very important to understand this. For example, if the storage has loaded data, but the component has not updated the display, what is the error? If you understand the internal event processing process, this can be easily tracked. In this example, the processing process is that the storage uses the Reader to call Ajax to load data to the server. After the data is read, the Proxy will then convert the data to the data that meets the storage Definition Format. After the processing is completed, the storage will trigger the stored Refresh event if new data is found, when a Refresh event is monitored in a component, it indicates that the storage has read data and can be updated and displayed. According to this process, if the data has been read but not displayed, it indicates that the existing problems include: data reading error, Data Conversion error, storage does not trigger the Refresh event, an error occurs when the component does not execute the updated display code or update. You can easily find the problem by troubleshooting and tracking the process one by one.

In Ext. Component, internal events are implemented by mixing the Ext. util. Observable class.

Ext. Component and template

As mentioned above, Ext. component uses the template and Ext. domHelper is used to render elements. That is to say, I do not have to render Ext. how can I implement Component rendering as the default DIV tag? Provide a configuration item based on the above idea. If you use a template, you can use the tpl configuration item. If you use Ext. DomHelper, you can continue to use the html configuration item.

Since the template can be used, it means that data can be rendered, you must reserve the data interface, so the configuration item data and setData methods are available.

Remote Loading

What should I do if the content needs to be rendered after being remotely loaded? Simple: The reserved interface is enough. This is the loader configuration item, which implements remote loading through the Ext. ComponentLoader object.

I want to directly manipulate the elements generated by the component

Although Ext JS is used, you do not need to directly manipulate the elements generated by components, but this requirement exists, because you must reserve interfaces for this purpose. Therefore, the getEl method is provided in the component to return the top-level element of the element generated by the component. With this element, you can manipulate the element and its child element. However, note that the getEl method returns Ext. dom. the instance of the Element object instead of the HTMLElement object.

Add other features

After some of the above processing, Ext. the Component function is already quite powerful, but there may be some features that may not be taken into account, and this can be used to mix new features into components. The following functions are also incorporated into Ext. Component:

Ext. mixin. Inheritable: Provides the inherited configuration attributes and configuration methods for components. Ext. util. Positionable: provides a positioning interface for component objects. Ext. mixin. ComponentDelegation: Provides delegate events for components. Ext. mixin. Bindable: Provides the bind configuration item for the component to connect to the view model. Ext. util. ElementContainer: Provides components with the ability to manipulate child elements (components. Ext. state. Stateful: provides the status function for the component. Ext. util. Focusable: Provides the focus Acquisition Function for components. Ext. mixin. Accessible: Provides components with accessibility. Ext. util. KeyboardInteractive: Provides the keyboard interaction function for components. Summary

Through the above analysis, do you know more about components? In general, I understand and understand components based on this idea. The main advantage of this method is that it is easy to remember the common configuration items and methods of components. Especially when you need to solve some problems or implement some functions that are not provided, You can roughly know whether or how to implement them. If you have any comments or comments in this regard, please leave a message to me. It is very helpful to have more exchanges.

After the component base class is implemented, the component is divided into two main lines: the container Class component and the non-container Class component to continuously derive different components. The next article will introduce the container Class component.