ExtJS关于组件Component生命周期

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

extjs组件生命周期大体分为3个阶段：初始化、渲染、销毁。

第一阶段：初始化

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

1、应用组件的配置：

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

2、注册事件:

诸如enable/disable,show,hide,render,destory,state restore,state save等等事件，是所有继承于Ext.Component的组件都会默认拥有的基本事件，它们将会在执行某些行为之前或之后被触发。

3、ComponentMgr注册组件实例:

在这里，每一个组件的实例都会生成一个字符串作为其ID值，供Ext.Cmp()方法来获得该实例的引用。在实例的配置中，可以通过配置id值给其传递ID值，不过如果设置了同样的ID值，Ext.Cmp()方法找到的实例引用将会是最后一个设置了该ID的组件。也就是说，最后设置的ID值将会覆盖前面的所有相同ID值。

4、调用initComponent()方法：

关于initComponent()方法，在直接或间接继承了Ext.Component基类的组件中，该方法会在Component的构造函数constructor中被调用。

这里来看看其回调顺序：

Ext.Window ==> Ext.Panel ==> Ext.Container ==> Ext.BoxComponent ==> Ext.Component

在自定义组件时，一般都会覆盖父类的initComponent()方法，并且在最后用this.callParent()来回调父类函数，则在实例化组件的过程中，container的initComponent方法里的this已经变成了该实例对象本身。如果不这么做，譬如直接将itsms写入配置中，则在内部调用container的initComponent方法时，this所指的对象将不是目标实例化的对象。配置内的items的内容将残留在new的对象上，从而导致在连续实例化同一个自定义组件时，除了第一个实例，后面的实例都将失败的结果。

于是在自定义组件的时候，最好将配置项写入initComponent方法中，并在配置项最后使用this.callParent()来回调其父类函数。有许多工作都会在initComponent方法里完成。例如注册自定义的事件、设定data stores、创建子控件等。initComponent可以看做constructor的补充，因此经常用于扩展组件的入口点。

5、加载插件和组件渲染：

如果在constructor的参数中传递了plugin对象，plugin的init方法将会被调用，同时会将父对象作为参数传递进init方法里。如果组件中配置了renderTo或者applyTo，则组件将马上被渲染，否则，它会被延迟渲染，直到组件被显式调用显示，或被它的容器所调用。

第二阶段：组件呈现

1、触发beforerender事件：

这是在组件被render渲染前被调用的。用以提供处理函数或者阻止组件的继续渲染。

2、设置容器：

如果没有父容器被指定，默认它的父对象被指定为它的容器。

3、调用onReader方法：

这是为子类执行呈现工作的一个非常重要的方法，这是一个模板方法，在子类中可以根据需来重写它的实现逻辑。直接被创建的类的 onRender 首先被调用，然后它可以通过superclass.onRender 来调用基类的 onRender 方法。这个方法很容易被重新实现，如果需要你可以在继承关系的任意类中重写这个方法。

4、不隐藏组件

默认，大多数组件都会通过设置像 x-hidden 这个样式来使它隐藏。当 autoShow 设置为true 时，这个隐藏功能的样式会被移除。

5、应用自定义样式

所有的 Component 子类都支持指定 cls 配置属性，通过它可以为 Component 所呈现的HTML 元素指定 CSS 样式。通过添加组件的 cls 属性，使用标准的样式规则，是一个自定义可视组件显示效果的非常完美的方法。

6、render 方法被触发

简单的通知组件已经被成功的呈现了。

7、调用 afterRender

这是另一个模板方法，子类根据逻辑需要可以重新实现或覆盖该方法。所有的子类可以通过调 superclass.afterRender.来调用父类的方法。

8、组件隐藏或不可用

根据配置选项的值来设置。

9、状态事件被初始化

可以状态化的组件会定义一些事件来指定状态的初始化和保存。如果提供，这些事件会被添加。