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对象的<b>容器</b>进行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未进行任何设置；