Ext js 2.0 Overview(3) 组件生命周期

Component Life Cycle（组件生命周期）

In general, the Component architecture in 2.0 will "just work." It's been designed to handle most of the management of components transparently to the end developer. However, there will come a time when something needs to be customized, or a Component needs to be extended. That's when a thorough understanding of the Component life cycle will become quite helpful. Following are the most important stages in the life cycle of every class based on Component:

通常情况下，组件架构已经够用了。它的设计目标是组件的大部分管理都对最终开发者透明。不管怎样，当我们需要定制或者扩展组件的时候，了解组件的生命周期会变得非常有用。下面的每一个阶段都是从Component继承下来的类的生命周期中重要的阶段。

Initialization（初始化）

1. The config object is applied（应用配置选项）
   Classes that extend Component do not need to (and usually should not) provide a separate constructor. Component's constructor will not only apply any config passed into its subclasses, it also provides all of the following steps.

从Component继承下来的类并不需要提供（通常没有提供）一个独立的构造器。Component的构造器不仅应用从子类传过来的配置选项，同时它还做了以下的工作。

2. The base Component events are created（创建事件）
   These are events that can be fired by any Component, and they are enable, disable, beforeshow, show, beforehide, hide, beforerender, render, beforedestroy, destroy.

任何组件都有enabled,disable,beforeshow,show,beforehide,hide,bdforerender,render,beforedesctory,destory这些事件可以被调用。

3. The component is registered in ComponentMgr（在ComponentMgr中注册组件实例）
   As such it will always be available via Ext.getCmp.

这样就可以通过Ext.getCmp被获得实例引用。

4. The initComponent method is called（initComponent方法的调用）
   This is the most important initialization step for subclasses, as this is a template method intended to be implemented by each subclass to provide any needed constructor logic. The class being created is called first, and each class in the hierarchy back up to Component is expected to call superclass.initComponent. This method makes it easy to implement and, if needed, override the constructor logic at any step in the hierarchy.

这是一个最重要的初始化步骤，它是做为一个模板方法，子类可以按需要重写这个方法。被创建的类的initComponent首先被调用，然后通过组件提供的superclass.initComponent向上调用。这个方法非常容易被实现，如果需要，你还可以任意覆盖构造器逻辑。

5. State is initialized (if applicable)（状态被始化）
   If the Component is state-aware, its state will be reloaded if available.

如果组件有状态特点，已保存的状态会被重新加载。

6. Plugins are loaded (if applicable)(加载插件)
   If this Component has any plugins specified in the config, they will be initialized at this time.

如果组件有指定插件，则插件会在这时候被初始化。

7. The component is rendered (if applicable)(组件呈现)
   The component is rendered immediately if either renderTo or applyTo is provided in the config, otherwise rendering is deferred until the Component is actually displayed or is told to render by its container.

如果有配置renderTo或applyTo，组件会马上被呈现输出，否则，它会被延迟输出，直到组件被显式调用显示，或被它的容器所调用输出。

Rendering（呈现）

1. The beforerender event is fired（beforerender事件被触发）
   This is a cancelable event, giving any handler the ability to prevent the Component from rendering if needed.

这是一个可取消的事件，如果需要给提供处理函数来阻止组件的继续呈现输出。

2. The container is set（设置容器）
   If a container is not specified, its element's parent is set as the container.

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

3. The onRender method is called(onRender方法被调用)
   This is the most important rendering step for subclasses, as this is a template method intended to be implemented by each subclass to provide the needed rendering logic. The class being created is called first, and each class in the hierarchy back up to Component is expected to call superclass.onRender. This method makes it easy to implement and, if needed, override the rendering logic at any step in the hierarchy.

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

4. The Component is "unhidden"（不隐藏组件）
   By default, many components are hidden using special CSS classes like "x-hidden". If the autoShow config value is true, any "hide" classes are removed from the component.

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

5. Custom class and/or style applied（应用自定义样式）
   All Component subclasses support the special config properties of cls and style which are a special CSS class and rule respectively that will be applied to the Element underlying this Component. Adding a cls to a Component and using standard CSS inheritance rules is the preferred method for visually customizing a Component and its constituent parts.

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

6. The render event is fired（render方法被触发）
   This is simply a notification that the Component has been successfully rendered at this point.

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

7. The afterRender method is called（调用afterRender）
   This is another template method that can be implemented or overridden to provide any special post-rendering logic that may be needed. Each subclass is expected to call superclass.afterRender.

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

8. The Component is hidden and/or disabled (if applicable)（组件隐藏或不可用）
   The hidden and disabled config values are applied at this point.

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

9. Any state-specific events are initialized (if applicable)（状态事件被初始化）
   State-aware Components can declare special events that are specific to loading and saving state. If supplied, any such events will be added.

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

Destruction（销毁）

1. The beforedestroy event is fired（beforedestroy事件被触发）
   This is a cancelable event, giving any handler the ability to prevent the Component from being destroyed if needed.

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

2. The beforeDestroy method is called（beforeDestroy方法被调用）
   This is another template method that can be implemented or overridden to provide any special pre-destruction logic that may be needed. Each subclass is expected to call superclass.beforeDestroy.

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

3. Element and its listeners are removed（事件监听者（代理）被移除）
   If the Component has been rendered, its underlying Element's event listeners are removed and the Element itself is then removed from the DOM.

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

4. The onDestroy method is called（onDestroy被调用）
   This is another template method that can be implemented or overridden to provide any special post-destruction logic that may be needed. Each subclass is expected to call superclass.onDestroy. Note that the Container class (and any subclasses as well) provides a default implementation of onDestroy that automatically loops through its items collection and calls destroy on each child Component.

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

5. Component is unregistered from ComponentMgr（组件实例从ComponentMgr中反注册）
   It will no longer be available via Ext.getCmp.

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

6. The destroy event is fired（destroy事件被触发）
   This is simply a notification that the Component has been successfully destroyed at this point.

提醒组被销毁成功。

7. Event listeners on the Component are removed（Component上的事件代理被移除）
   The Component itself can have event listeners separate from its underlying Element. If any exist, they are removed.

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