我们创建一个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() {}