Ext架构分析(3)--Widget之父Component：构建器

在Ext2.0中，Component是一切Widget的父类，所有的Widget都继承与它，而他又继承自Observable,因此，它天生就具备了对于事件的处理能力。
首先，让我们看一下它的构建器，它的构建器可以传入三种类型的对象： 对象(该对象的initailConfig属性为真正的配置对象;isAction属性决定了该参数是否是一个Ext.Action对象，如果是Ext.Action对象则注册Component对象）、Ext.Element对象和字符串对象。如果是Ext.element对象或是String对象，Component会在构建其对象中把他们转换为配置属性对象：

Ext.Component  =   function (config) { 
config = config || {}; 
if(config.initialConfig){ 
if(config.isAction){   // 如果配置属性对象是Ext.action对象 
this.baseAction = config; 
} 
config = config.initialConfig; // component cloning / action set up 
}else if(config.tagName || config.dom || typeof config == "string"){ // element object 
config = {applyTo: config, id: config.id || config}; 
} 
/**//* 
从以上的代码可以看出，Config对象的结够应该如下所示： 
{ 
applyTo:, 
id:, 
initialConfig:{}, 
isAction:boolean 
} 
*/ 
this.initialConfig = config; 
Ext.apply(this, config); 

Ext.ComponentMgr.register(this);//向ComponentMgr中注册自己 
Ext.Component.superclass.constructor.call(this);//调用父类的构建器 
//在Action中注册自己 
if(this.baseAction){ 
this.baseAction.addComponent(this); 
} 
this.initComponent(); 

// Component还注册了以下的事件，换句话说，所有的widget都支持以下的事件： 
this.addEvents( 
'disable', 
'enable', 
'beforeshow', 
'show', 
'beforehide', 
'hide', 
'beforerender', 
'render', 
  'beforedestroy', 
  'destroy', 
  'beforestaterestore', 
  'staterestore', 
  'beforestatesave', 
  'statesave' 
); 

Component还提供了对Plugin的支持，在构建过程中，Component对插件逐一的进行调用：

if ( this .plugins) { 
if(this.plugins instanceof Array){ 
  for(var i = 0, len = this.plugins.length; i < len; i++){ 
    this.plugins.init(this); 
  } 
}else{ 
  this.plugins.init(this); 
} 
}  

最后，如果Config对象中配置了applyTo属性则进行applyToMarkup处理，如果配置了renderTo属性则进行renderTo属性的渲染：

if ( this .applyTo) { 
this.applyToMarkup(this.applyTo); 
delete this.applyTo; 
} else   if ( this .renderTo) { 
this.render(this.renderTo); 
delete this.renderTo; 
}  

applyToMarkup方法实际上也是间接的调用了render方法，实际上，它是对applyTo对象的 容器进行render方法的调用：

applyToMarkup :  function (el) { 
this.allowDomMove = false; 
this.el = Ext.get(el); 
this.render(this.el.dom.parentNode); 
}  

由以上的分析，我们可以得出如下的结论：
1.如果Component的Config对象属性配置了renderTo和applyTo属性，则Component对象会在构建时立刻进行渲染；否则，渲染不会在构建时进行（这是处于性能的考虑）。
2.配置renderTo和applyTo属性的区别如下：
  1）renderTo是对组件进行渲染，而applyTo是对组件的容器进行渲染；
  2）applyTo对组件进行了this.el属性的设置，而renderTo未进行任何设置；