ExtJS about component Component life cycle

The ExtJS component life cycle is broadly divided into 3 phases: initialize, render, destroy.

　　First Stage: initialization

Initialization begins with the creation of components, all necessary configuration settings, event registration, pre-rendering processing, and so on at this Point.

　　1. Configuration of Application Components:

When initializing an instance of a component, the passed component Configuration object contains all the functionality that you want the component to have, which is done in the first few lines of code in the Ext.component base class.

　　2. Registration Events:

Events such as Enable/disable,show,hide,render,destory,state restore,state save, etc., Is the basic event that all components that inherit from Ext.component will default to, and are triggered before or after some behavior is Performed.

　3. Componentmgr registered Component Instance:

here, Each instance of a component generates a string as its ID value, which is used by the ext.cmp () method to obtain a reference to the Instance. In the configuration of the instance, you can pass the ID value to it by configuring the ID value, But if you set the same ID value, the instance reference found by the ext.cmp () method will be the last component that has the ID set. In other words, the last set ID value overrides all previous same ID Values.

　　4. Call the InitComponent () method:

With regard to the InitComponent () method, the method is called in the component constructor constructor, in a component that inherits the Ext.component base class directly or Indirectly.

Here's a look at the callback Sequence:

Ext.window ==> ext.panel ==> ext.container ==> ext.boxcomponent ==> ext.component

When customizing a component, the InitComponent () method of the parent class is generally overwritten, and the parent class function is This.callparent () at the end, in the process of instantiating the component, The This in Container's InitComponent method has become the instance object itself. If you do not, for example, write itsms directly to the configuration, when you call Container's InitComponent method internally, The object that this refers to is not the object instantiated by the Target. The contents of the items within the configuration will remain on the object of new, resulting in the failure of the subsequent instance, except for the first instance, when the same custom component is instantiated consecutively.

So when customizing components, it is a good idea to write the configuration item to the InitComponent method and use This.callparent () to tune its parent function at the end of the configuration Item. A lot of work will be done in the InitComponent method. For example, registering custom events, setting data stores, creating child controls, and so On. InitComponent can be seen as a supplement to constructor, so it is often used to extend the entry point of Components.

　　5. Loading Plug-ins and component Rendering:　　　

If the plugin object is passed in the constructor parameter, the Init method of plugin is called, and the parent object is passed as a parameter into the init method. If Renderto or ApplyTo is configured in the component, the component will be rendered immediately, otherwise it will be deferred until the component is explicitly called or called by its container.

Phase Ii: Component Rendering

　　1. Trigger BeforeRender Event:

This is called before the component is Rendered. Used to provide a handler function or to prevent the component from continuing rendering.

　　2, Set the Container:

If no parent container is specified, the default its parent object is specified as its container.

　　3. Call the Onreader method:　　　　

　　　　This is a very important way to perform rendering work for a subclass, which is a template method that can be overridden in a subclass to override its implementation logic. The onRender of the class directly created is called first, and then it can invoke the OnRender method of the base class through Superclass.onrender.　　This method is easy to re-implement, and you can override this method in any class that inherits the relationship if you want.

　　4. Do not hide components

By default, most components make it invisible by setting the style like X-hidden. When AutoShow is set to true, the style of this hidden function is Removed.

　　5. Apply a custom style

All Component subclasses support the specification of a CLS configuration property, which allows you to specify CSS styles for the HTML elements rendered by Component. By adding a Component's CLS attribute, using standard style rules, It is a perfect way to customize the visual Component's display Performance.

　　6. The Render method is triggered

A simple notification component has been successfully rendered.

　　7. Call AfterRender

This is another template method that the subclass can re-implement or overwrite depending on the logic required. All subclasses can invoke the method of the parent class by adjusting the Superclass.afterrender.

8. The component is hidden or not available

　　　　Set according to the value of the configuration Option.

　　9. Status Events are initialized

A component that can be stateful defines events to specify the initialization and preservation of the State. If provided, these events are Added.

　　Phase Iii: Destruction　　

　　1. Trigger Beforedestroy

This is an event that can be canceled and, if necessary, may prevent the component from being destroyed by providing an event proxy.

　　2. Call the Beforedestroy method

Another template method, in which the parent Class's methods can be re-implemented and Invoked.

　　3. Remove Event listener (agent)

If the component has already been rendered, remove the event listener list for its underlying HTML element, and then remove the element from the DOM.

　　4. OnDestroy is called

This is also a template method that can be re-implemented in Subclasses. It is important to note that the container class provides a default OnDestroy implementation that loops through its member Groups.

5. Component Instances are unregistered from componentmgr

The object instance can no longer be obtained through EXT.GETCMP.

　　6. The Destroy event is triggered

This is just a simple reminder that the component was destroyed successfully.

　　7. Remove the event agent on Component

　　　　Components can own the event proxies independently of the elements, and remove them if they exist.

ExtJS about component Component life cycle