There are the following phases of a Component life:
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.
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.
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.
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.
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.
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.