【ExtJS】关于Component生命周期

　　很久以前就学习过extjs的组件生命周期，很久之后，再回头看一看，又增加好多新的认识。

---

　　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、状态事件被初始化

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

---

　　第三阶段：销毁　　

　　1、触发 beforedestroy  　　　　

　　　　这是一个可取消的事件，如果需要，可能通过提供事件代理来阻止组件被销毁。 　　

　　2、调用 beforeDestroy 方法 　　　　

　　　　又一个模板方法，在子类中可以重新实现和调用父类的方法。 　　

　　3、移除事件监听者（代理）　　　　

　　　　如果组件已被呈现，则移除它底层的 HTML 元素的事件监听列表，然后将元素从 DOM中移除。

　　4、onDestroy 被调用

　　　　这个还是一个模板方法，在子类可以重新实现。这里需要注意的是，容器类提供了一个默认的 onDestroy 实现，它会循环销毁它的成员组。

　　5、组件实例从 ComponentMgr 中反注册

　　　　不可以再通过 Ext.getCmp 获取到对象实例。

　　6、destroy 事件被触发

　　　　这只是一个简单的提醒，表示组件销毁成功。

　　7、移除 Component 上的事件代理

　　　　组件可以独立于元素，自己拥有事件代理，如果存在则移除它们。

---

　　ps：以上内容，包括了前人的理论概括，加上自己的学习认识，权作记录，自勉！