There are the following phases of a Component life:
- definition
- instantiation
- rendering
- life
- 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.
- Ext, Angular, React, and Vue - 27. June 2019
- The Site Resurgence - 11. February 2018
- Configuring ViewModel Hierarchy - 19. June 2015
2 Responses
Canyou please post the tutorial for Ext.Direct
I do not use Direct personally but I’ll ask one of my friends if he would write a tutorial.