Extjs组件的生命周期

ゞ浴缸里的玫瑰 2022-07-17 03:39 248阅读 0赞

Extjs的控件和现实世界中的事物有很多相似的地方，都拥有被创建、使用以及销毁这样一个生命周期。

Extjs控件的生命周期大体分为三个阶段：初始化、渲染、销毁。如下图所示：

![2011031508555567.png][]

Extjs控件的生命周期总是以\[初始化\]开始,以\[销毁\]结束，组件不一定会有\[渲染\]这一过程。为了更好的了解并运用好生命周期的整个结构，我们必须更详细的去了解这个过程。

如果你打算扩展、组合Extjs控件或者创建自己的插件，掌握组件的生命将非常重要。组件生命周期的整个过程都在基类Ext.Component中有了很好的体现。

第一个阶段：初始化

初始化工作开始于组件的诞生，所有必须的配置设定、事件注册、预渲染处理等都在此时进行。如下图：

![2011031509152926.png][]

让我们一起浏览一下初始化的每一个步骤：

1.应用组件的配置：当我们初始化一个组件的实例时，你传递的组件配置对象包含了所有你想让组件所拥有的功能。这些都是在Ext.Component基类的前几行代码完成的。

2.注册组件基本的事件：每一个继承于Ext.Component的组件都会默认响应一些基本的事件，它们会在执行某些行为之前或之后被触发：enable/disable,show,hide,render,destory,state restore,state save等等。

在执行某些行为之前触发的事件主要用于检查成功返回某些条件之后执行某个逻辑，例如，myPanel.show被调用，它将触发beforeshow事件，和beforeshow事件绑定的方法将会被执行。如果beforeshow事件初始函数返回了false，myPanel将不会show。

3.ComponentMgr 注册：ComponentMgr类会为每一个被实例化的组件产生一个唯一的字符串作为它的ID。你可以在配置信息里，通过传递ID参数到constructor构造器里来复写Ext-generated ID。需要注意的是如果注册的ID有重复值，那么新产生的组件将会覆盖后产的。所以当你打算自己传递ID时一定要保证ID的唯一性。

4.执行initComponent：有许多工作都会在initComponent方法里完成。例如注册自定义的事件、设定data stores、创建子控件等。initComponent可以看做constructor的补充，因此经常用于扩展组件的入口点。

5.初始化plugins：如果在constructor的参数中传递了plugin对象，plugin的init方法将会被调用，同时会将父对象作为参数传递进init方法里。

6.初始化Component状态：如果组件是state-aware的，它将利用全局单例StateManager类注册自己的状态。默认情况下，所有的Component都是State aware的。

代码片段：Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

7.渲染Component：如果在constructor中renderTo或applyTo参数被传递，此时将开始执行渲染，反之组件延迟渲染，直到它的render方法被调用。

[2011031508555567.png]: /images/20220717/896633a2c3e445b49b071604f29f5a9c.png
[2011031509152926.png]: /images/20220717/fd4a21442b0940fba88c678a07d1baa7.png