小谈Ext架构-Widget之父Component：总结

Widget之父Component：总结

在这里，我们引用Ext Overview中的Component life cycle对组件的功能进行相应的总结：
[list=1]

·  配置项对象生效：
组件对象的构造器会把全部的配置项传入到其子类中去，并且进行下列所有的步骤。

·  组件的底层事件创建
这些事件由组件对象负责触发。事件有enable, disable, beforeshow, show, beforehide, hide, beforerender, render, beforedestroy, destroy

·  组件在组件管理器里登记
initComponent这方法总是使用在子类中，就其本身而论，该方法是一 模板方法（template method），用于每个子类去现实任何所需的构造器逻辑（any needed constructor logic）。首先会创建类，然后组件对象各层次里面的每个类都应该调用superclass.initComponent。通过该方法，就可方便地实现（implement），或重写（Override）任意一层构造器的逻辑。

·  加载插件（如果有的话）
如果该组件有指定任何插件，这时便会初始化。

·  渲染组件（如果必须的话）
如果指定了组件的renderTo 或 applyTo配置属性，那么渲染工作就会立即开始，否则意味着延时渲染（在layout对象的layout方法中也会对组件进行渲染），即等待到显式控制显示，或是其容器告知其显示的命令。

渲染过程 Rendering
[list=1]

·  触发beforerender事件
这是个可取消的事件，指定的句柄（handler）通过返回false可阻止组件进行渲染

·  设置好容器
如果没有指定一个容器，那么将使用位于DOM元素中组件的父节点作为容器。

·  调用onRender方法 这是子类渲染最重要的一个步骤，由于该方法是一个模板方法（template method），用于每个子类去现实任何所需的渲染逻辑（any needed render logic）。首先会创建类，然后组件对象各层次里面的每个类都应调用superclass.onRender。通过该方法，就可方便地实现（implement），或重写（Override）任意一层渲染的逻辑。

·  处理组件是“隐藏”状态 默认下，许多组件是由CSS样式类如"x-hidden"设置隐藏的。如果 autoShow所配置的值为true，这时就不会有这个"hide"样式类作用在该组件上

·  自定义的类、样式生效 Custom class and/or style applied
一切组件的子类都支持cls和style 两种特殊的配置属性，分别用于指定用户自定义的CSS样式类和CSS规则。 推荐指定cls的方法来制定组件及其各部分的可视化设置。由于该样式类会套用在组件markup最外的一层元素，所以标准CSS规则会继承到组件下任何子元素的身上。

·  触发render事件 The render event is fired
这是组件通知成功渲染的一个步骤。这时，你可肯定地认为组件的DOM元素是可用的了。如果尝试在渲染之前访问组件，会抛出一个不可用的异常。

·  调用了afterRender方法 The afterRender method is called
这是另外一个实现或重写特定所需的“后渲染”逻辑的模板方法。每个子类应调用superclass.afterRender.

·  组件被隐藏或禁用（如果有的话） The Component is hidden and/or disabled (if applicable)
配置项hidden和disabled到这步生效

·  所有状态感知的事件初始化（如果有的话） Any state-specific events are initialized (if applicable)
状态感知的组件可由事件声明特殊加载和保存状态。如支持，加入此类的事件。