ExtJS4.07 Component的生命周期

我们创建一个Ext.Componet组件时候，会按照以下顺序对组件进行初始化。

1、调用Ext.apply()复制参数；//Ext.apply(me,config);

2、调用addEvents() 添加事件；//me.addEvents

3、调用initComponent()初始化组件；

4、调用Ext.ComponentMgr.register(me)注册当前组件；

5、调用initPlugin()初始化插件；

6、getLoader()加载；

7、调用render()对组件进行渲染。

下面是

Ext.AbstractComponent的代码片段：

constructor : function(config) {        var me = this,            i, len;        config = config || {};        me.initialConfig = config;        Ext.apply(me, config);        me.addEvents(            /**             * @event beforeactivate             * Fires before a Component has been visually activated. Returning false from an event listener can prevent             * the activate from occurring.             * @param {Ext.Component} this             */            'beforeactivate',            /**             * @event activate             * Fires after a Component has been visually activated.             * @param {Ext.Component} this             */            'activate',            /**             * @event beforedeactivate             * Fires before a Component has been visually deactivated. Returning false from an event listener can             * prevent the deactivate from occurring.             * @param {Ext.Component} this             */            'beforedeactivate',            /**             * @event deactivate             * Fires after a Component has been visually deactivated.             * @param {Ext.Component} this             */            'deactivate',            /**             * @event added             * Fires after a Component had been added to a Container.             * @param {Ext.Component} this             * @param {Ext.container.Container} container Parent Container             * @param {Number} pos position of Component             * @since Ext 3             */            'added',            /**             * @event disable             * Fires after the component is disabled.             * @param {Ext.Component} this             * @since Ext 1             */            'disable',            /**             * @event enable             * Fires after the component is enabled.             * @param {Ext.Component} this             * @since Ext 1             */            'enable',            /**             * @event beforeshow             * Fires before the component is shown when calling the {@link #show} method. Return false from an event             * handler to stop the show.             * @param {Ext.Component} this             * @since Ext 1             */            'beforeshow',            /**             * @event show             * Fires after the component is shown when calling the {@link #show} method.             * @param {Ext.Component} this             * @since Ext 1             */            'show',            /**             * @event beforehide             * Fires before the component is hidden when calling the {@link #hide} method. Return false from an event             * handler to stop the hide.             * @param {Ext.Component} this             * @since Ext 1             */            'beforehide',            /**             * @event hide             * Fires after the component is hidden. Fires after the component is hidden when calling the {@link #hide}             * method.             * @param {Ext.Component} this             * @since Ext 1             */            'hide',            /**             * @event removed             * Fires when a component is removed from an Ext.container.Container             * @param {Ext.Component} this             * @param {Ext.container.Container} ownerCt Container which holds the component             * @since Ext 3             */            'removed',            /**             * @event beforerender             * Fires before the component is {@link #rendered}. Return false from an event handler to stop the             * {@link #render}.             * @param {Ext.Component} this             * @since Ext 1             */            'beforerender',            /**             * @event render             * Fires after the component markup is {@link #rendered}.             * @param {Ext.Component} this             * @since Ext 1             */            'render',            /**             * @event afterrender             * Fires after the component rendering is finished.             *             * The afterrender event is fired after this Component has been {@link #rendered}, been postprocesed by any             * afterRender method defined for the Component.             * @param {Ext.Component} this             * @since Ext 3             */            'afterrender',            /**             * @event beforedestroy             * Fires before the component is {@link #destroy}ed. Return false from an event handler to stop the             * {@link #destroy}.             * @param {Ext.Component} this             * @since Ext 1             */            'beforedestroy',            /**             * @event destroy             * Fires after the component is {@link #destroy}ed.             * @param {Ext.Component} this             * @since Ext 1             */            'destroy',            /**             * @event resize             * Fires after the component is resized.             * @param {Ext.Component} this             * @param {Number} adjWidth The box-adjusted width that was set             * @param {Number} adjHeight The box-adjusted height that was set             */            'resize',            /**             * @event move             * Fires after the component is moved.             * @param {Ext.Component} this             * @param {Number} x The new x position             * @param {Number} y The new y position             */            'move'        );        me.getId();        me.mons = [];        me.additionalCls = [];        me.renderData = me.renderData || {};        me.renderSelectors = me.renderSelectors || {};        if (me.plugins) {            me.plugins = [].concat(me.plugins);            me.constructPlugins();        }        me.initComponent();        // ititComponent gets a chance to change the id property before registering        Ext.ComponentManager.register(me);        // Dont pass the config so that it is not applied to 'this' again        me.mixins.observable.constructor.call(me);        me.mixins.state.constructor.call(me, config);        // Save state on resize.        this.addStateEvents('resize');        // Move this into Observable?        if (me.plugins) {            me.plugins = [].concat(me.plugins);            for (i = 0, len = me.plugins.length; i < len; i++) {                me.plugins[i] = me.initPlugin(me.plugins[i]);            }        }        me.loader = me.getLoader();        if (me.renderTo) {            me.render(me.renderTo);            // EXTJSIV-1935 - should be a way to do afterShow or something, but that            // won't work. Likewise, rendering hidden and then showing (w/autoShow) has            // implications to afterRender so we cannot do that.        }        if (me.autoShow) {            me.show();        }        //<debug>        if (Ext.isDefined(me.disabledClass)) {            if (Ext.isDefined(Ext.global.console)) {                Ext.global.console.warn('Ext.Component: disabledClass has been deprecated. Please use disabledCls.');            }            me.disabledCls = me.disabledClass;            delete me.disabledClass;        }        //</debug>    },

组件销毁：

destroy: function() {}

在应用中有时候需要重写组件destroy()方法，让组件及时销毁，释放内存；防止第二次渲染时候出现异常。

destroy: function() {}