The component life cycle

Before we move into the layout systems and widgets, you should know a few concepts about how components work.

Every component in the Ext JS framework extends from the Ext.Component class. This class extends from the Ext.Component, or by its alternate class name Ext.AbstractComponent class, which provides shared methods for components across the framework.

Note

To understand more about component hierarchies, see http://docs.sencha.com/extjs/5.1/core_concepts/components.html.

When we create components such as panels, windows, grids, trees, and any other, there's a process called "the component lifecycle" that you should understand.

It is important for us to know the things that occur during each of the phases in the lifecycle process. This will help us to create custom components or extend the existing ones.

Basically, there are three phases in the component's lifecycle: the initialization process, the rendering process, and the destruction process...