Knowing the phases of component life cycle is important for every developer. Learn what the phases are and what is happening in each of them.

Share This Post

lifecycleThere are the following phases of a Component life:
  1. definition
  2. instantiation
  3. rendering
  4. life
  5. destruction

1. Definition

The component’s (or any other class’) definition time is while Ext.define is running. Dependencies are loaded from the server, the new class is created, configuration options and methods are added to it (or the defaults are modified), the class is assigned to a variable in the namespace, and its alias (xtype) is registered. The result is a new class ready to be instantiated.

2. Instantiation

It is when Ext.create runs. A new instance of the class is created, constructor and, for component and its descendants, initComponent runs. Mind please that HTML markup is not created in this phase. Note: If renderTo config option is set, the following rendering phase is executed automatically afterwards. However, instantiation and rendering are still two distinct phases. The result is an instance of the class sitting (invisibly) somewhere in the memory.

3. Rendering

The HTML markup of the component (and its children) is created in this phase, dimensions are calculated and the markup is inserted in the DOM. The component becomes visible. (Initial visibility can be suppressed by config options but the HTML is in DOM). The result is HTML of the component in DOM and component ready for the user interaction. Note: Non-components, classes not inheriting from Ext.Component, do not have this phase as they have no markup.

4. Life

This is the phase of user interaction. Component shows its content and listens to user actions and fires events as dictated by the business logic.

5. Destruction

In this phase, the listeners are removed from the component and its elements and then it is removed from DOM. If it is a container, items are destroyed recursively before the container itself is destroyed. Finally, the class instance is removed from the memory The result is that both DOM and instance do not exist anymore. This article describes Component life cycle, however, it also applies to non-component classes (store, model, proxy, etc.), only there is no rendering and life does not include user interaction.
Follow me:
Latest posts by saki (see all)

Want to collaborate on an upcoming project?