Talk about the components of EXT JS--Component base class: Ext.component

Overview

Ext.component is the base class for all EXT components, which is mentioned in the first sentence of the Ext.component API. The second paragraph then explains the basic features it contains: Hide/show, enable/disable, and size control. In addition to these basic functions, but also contains a lot of things. Of course, it's not possible to do everything in the API, so how do we understand this component base class?

Ext.component===div

If you render a ext.component to a page, you will see that the component simply adds a DIV tag to the page, which is as simple as that. That is, ext.component is equivalent to a div tag. So the next question, what can I do with this? If you are simply using a div tag in a page, we can let it display the content, or you can use it to build the page layout with other div tags, and in general, let it do what you want to do.

Since a div tag can do so many things, how do you achieve what you want to do in ext.component?

Show content

To display content within a DIV, there are two ways to add content directly to the div to display it, one to find the div tag, and then add the content to the DIV tag. If you were the designer of ext.component, how would you implement both of these approaches? In general, the first way, the content is written into a variable, and then the combination of the DIV tag and the content into a string and then output, and the second is basically using the DOM operation to get the element first, and then use the element's innerHTML property to write the content into the div tag.

The above is the way to implement when no JavaScript framework is used, and for classes that need to be instantiated before ext.component can be used, how do you implement them? If you are familiar with class design, the first way of implementation is certainly when the class is instantiated, the content is bound to the property, and then the combination of strings within the class output, the second way of implementation is basically to provide a method to operate. Thus, in order to handle both of these ways, ext.component must provide a property to hold the contents of the initialization, as well as provide a way to handle the update of the content. The HTML configuration item and the Update method are the two functions that are implemented within ext.component.

Note: Configuration items (config options) are strictly attributes, but in JavaScript it is not easy to differentiate between which properties are allowed to be initialized, which are not allowed to initialize, and especially for properties such as read-only properties. If the API is not differentiated, it will increase the chance of error, and thus intentionally added in the API configuration of the unique name to differentiate.

Of course, for frameworks that encapsulate the underlying DOM operations and provide templates, there is no real way to implement these two operations with a simple implementation. So, don't think of what I say is the way of Ext.component's realization. Here, just understand the basic realization of its ideas on the line. To explore, the ext.component implementation of both approaches is quite complex, and the complex place is mainly in the rendering process. This rendering process is implemented through the Ext.util.Renderable class, which is mixed into the ext.component by blending in (mixins). In this Ext.util.Renderable class, the rendering of HTML code is mainly by template and ext.domhelper to achieve, interested can be self-study, here is not deep.

Style

For a DIV tag, the indispensable link is, of course, defining a style or style class for it, and this, like the idea of the content, must also provide the appropriate configuration items and methods, so there are style and CLS configuration items and Addcls, Removecls, and SetStyle methods. As to why the style class split into two methods, and style only one method, specific reasons I only know that the style class in the Ext JS components often need to add or reduce, the use of two methods will be more convenient, in fact, there is a third method replacecls, but as to the style why only SetStyle method, Specific reasons for the moment did not think.

Size

The ability to control the dimensions of a DIV tag to control the visual range of the div tag is often used, so this function is necessary.

scroll bar

When the div tag is fixed, the content may go beyond the viewable area, when do you want to display the scroll bar, let the user scroll to see the content, or not display the scroll bar, ignoring the extra content directly? This is also to be considered.

Hide/Show

Div is displayed and hidden, this is also often used, and therefore needs to be implemented.

Enable/disable

This is useful when using div tags to implement button functions.

Simplifying style settings

A div tag can set a lot of properties, if some attributes need to be used frequently, how to simplify the input of these properties? It's impossible to always use style configuration items? The solution is to direct input directly through configuration items such as padding, margin, border, and TabIndex.

Floating Div

Many sites can see some floating elements, such as floating sidebar, pop-up window, and so on, for a framework, of course, this is not less, after all, window, frame Information window needs to use this function. In order to distinguish the floating function from the basic function, it is easy to maintain, the framework concentrates the floating function into the Ext.util.Floating class, and then mixes the floating function into the Ext.component class by blending function.

Animation

Animation-enabled frames are awesome and essential. The ext.component is achieved by mixing Ext.util.Animate.

Event

For the event, this needless to say, how may be missing. It is important to note that in the framework, there are two kinds of events, one is the browser event and the other is an internal event.

The browser event refers to the event generated by the user and the page exchange, which is implemented through Ext.dom.ElementEvent, which can be used to bind or dismiss an element when using Ext.dom.Element for DOM operations. The essential function of the ext.component component is DOM manipulation, which allows the Ext.dom.Element to handle browser events.

Internal events are generated events inside the Ext JS framework, such as storage (store) loading data, which notifies the component to update the display, which needs to be handled through internal events. It's important to understand that, for example, the store has loaded the data, but the component hasn't been updated to show what went wrong? If you know the internal event processing process, this is easy to follow, the example of the process is that the store through the Reader (reader) call Ajax to the server to load the data, after the data is read, the proxy will then convert the data into a storage-defined format of the data, when the processing is complete, When the store discovers new data, it triggers the stored refresh event, and in the component, when the refresh event is heard, the store has read the data and can update the display. According to this process, if the data has been read and not displayed, then the problems include: Data read errors, data conversion errors, storage does not trigger the Refresh event, the component does not perform updates to display the code or an error occurs when the update. By troubleshooting and tracking each of these processes, it is easy to find the problem.

In ext.component, internal events are implemented by mixing into the Ext.util.Observable class.

Ext.component and templates

As mentioned above, Ext.component is the use of templates and ext.domhelper to render elements, that is, I do not have to render ext.component as the default div tag, then how to implement it? According to the above idea, provide a configuration item on the line, if you use a template, you can use the TPL configuration items, if you use Ext.domhelper, you can continue to use HTML configuration items.

Since templates can be used, which means that data can be rendered, the data interface must be reserved and the configuration item data and SetData methods are available.

Remote load

What if the content is rendered after a remote load? Simple, reserved interface on the line, this is the loader configuration item, it is through the Ext.componentloader object to implement remote loading.

Add additional Features

After some of the above processing, Ext.component's functionality is already quite powerful, but there may be some features that might not be considered, which can be mixed into the component in such a way. The following features are also mixed in the ext.component:

• Ext.mixin.Inheritable: Provides inheritable configuration properties and configuration methods for components.
• Ext.util.Positionable: Provides a positioning interface for a Component object.
• Ext.mixin.ComponentDelegation: Provides delegate events for the component.
• Ext.mixin.Bindable: Provides a BIND configuration item for the component to connect to the view model.
• Ext.util.ElementContainer: Provides the ability to manipulate child elements (components) for a component.
• Ext.state.Stateful: Provides state functionality for components.
• Ext.util.Focusable: Provides the component with the ability to get focus.
• Ext.mixin.Accessible: Provides accessibility features for components.
• Ext.util.KeyboardInteractive: Provides keyboard interaction functionality for components.

Summary

Through the above analysis, I do not know if you have a more understanding of the components? In general, I am based on the idea of understanding and understanding components, the main advantage of this approach is to facilitate memory components of common configuration items and methods. Especially if you need to solve some problems or implement some features that are not provided, you can know in general whether or not to achieve, how to achieve. If you have any views or comments on this, please leave a message to me, more communication is very helpful.

After implementing the component base class, the component is divided into two main lines of the container class component and the non-container class component, and the container class component is described in the next article.

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.

Talk about the components of EXT JS--Component base class: Ext.component