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

在Ext2.0中,Component是一切Widget的父类,所有的Widget都继承与它,而他又继承自Observable,因此,它天生就具备了对于事件的处理能力。
首先,让我们看一下它的构建器,它的构建器可以传入三种类型的对象: 对象(该对象的initailConfig属性为真正的配置对象;isAction属性决定了该参数是否是一个Ext.Action对象,如果是Ext.Action对象则注册Component对象)、Ext.Element对象和字符串对象。如果是Ext.element对象或是String对象,Component会在构建其对象中把他们转换为配置属性对象:
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器Ext.Component = function(config)Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器config 
= config || Ext架构分析(3)--Widget之父Component:构建器{}
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器
if(config.initialConfig)Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器
if(config.isAction)Ext架构分析(3)--Widget之父Component:构建器{   // 如果配置属性对象是Ext.action对象 
Ext架构分析(3)--Widget之父Component:构建器
this.baseAction = config; 
Ext架构分析(3)--Widget之父Component:构建器}
 
Ext架构分析(3)--Widget之父Component:构建器config 
= config.initialConfig; // component cloning / action set up 
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器
}
else if(config.tagName || config.dom || typeof config == "string")Ext架构分析(3)--Widget之父Component:构建器// element object 
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器
config = Ext架构分析(3)--Widget之父Component:构建器{applyTo: config, id: config.id || config}
Ext架构分析(3)--Widget之父Component:构建器}
 
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器
/**//* 
Ext架构分析(3)--Widget之父Component:构建器从以上的代码可以看出,Config对象的结够应该如下所示: 
Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器applyTo:Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器id:, 
Ext架构分析(3)--Widget之父Component:构建器initialConfig:{}, 
Ext架构分析(3)--Widget之父Component:构建器isAction:boolean 
Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器
*/
 
Ext架构分析(3)--Widget之父Component:构建器
this.initialConfig = config; 
Ext架构分析(3)--Widget之父Component:构建器Ext.apply(
this, config); 
Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器Ext.ComponentMgr.register(
this);//向ComponentMgr中注册自己 
Ext架构分析(3)--Widget之父Component:构建器
Ext.Component.superclass.constructor.call(this);//调用父类的构建器 
Ext架构分析(3)--Widget之父Component:构建器//
在Action中注册自己 
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器
if(this.baseAction)Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器
this.baseAction.addComponent(this); 
Ext架构分析(3)--Widget之父Component:构建器}
 
Ext架构分析(3)--Widget之父Component:构建器
this.initComponent(); 
Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器
// Component还注册了以下的事件,换句话说,所有的widget都支持以下的事件: 
Ext架构分析(3)--Widget之父Component:构建器
this.addEvents( 
Ext架构分析(3)--Widget之父Component:构建器
'disable'
Ext架构分析(3)--Widget之父Component:构建器
'enable'
Ext架构分析(3)--Widget之父Component:构建器
'beforeshow'
Ext架构分析(3)--Widget之父Component:构建器
'show'
Ext架构分析(3)--Widget之父Component:构建器
'beforehide'
Ext架构分析(3)--Widget之父Component:构建器
'hide'
Ext架构分析(3)--Widget之父Component:构建器
'beforerender'
Ext架构分析(3)--Widget之父Component:构建器
'render'
Ext架构分析(3)--Widget之父Component:构建器  
'beforedestroy'
Ext架构分析(3)--Widget之父Component:构建器  
'destroy'
Ext架构分析(3)--Widget之父Component:构建器  
'beforestaterestore'
Ext架构分析(3)--Widget之父Component:构建器  
'staterestore'
Ext架构分析(3)--Widget之父Component:构建器  
'beforestatesave'
Ext架构分析(3)--Widget之父Component:构建器  
'statesave' 
Ext架构分析(3)--Widget之父Component:构建器); 

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

Component还提供了对Plugin的支持,在构建过程中,Component对插件逐一的进行调用:
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器if(this.plugins)Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器
if(this.plugins instanceof Array)Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器  
for(var i = 0, len = this.plugins.length; i < len; i++)Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器    
this.plugins.init(this); 
Ext架构分析(3)--Widget之父Component:构建器  }
 
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器}
elseExt架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器  
this.plugins.init(this); 
Ext架构分析(3)--Widget之父Component:构建器}
 
Ext架构分析(3)--Widget之父Component:构建器}
 

最后,如果Config对象中配置了applyTo属性则进行applyToMarkup处理,如果配置了renderTo属性则进行renderTo属性的渲染:
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器if(this.applyTo)Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器
this.applyToMarkup(this.applyTo); 
Ext架构分析(3)--Widget之父Component:构建器
delete this.applyTo; 
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器}
else if(this.renderTo)Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器
this.render(this.renderTo); 
Ext架构分析(3)--Widget之父Component:构建器
delete this.renderTo; 
Ext架构分析(3)--Widget之父Component:构建器}
 
Ext架构分析(3)--Widget之父Component:构建器

applyToMarkup方法实际上也是间接的调用了render方法,实际上,它是对applyTo对象的容器进行render方法的调用:
Ext架构分析(3)--Widget之父Component:构建器Ext架构分析(3)--Widget之父Component:构建器applyToMarkup : function(el)Ext架构分析(3)--Widget之父Component:构建器
Ext架构分析(3)--Widget之父Component:构建器
this.allowDomMove = false
Ext架构分析(3)--Widget之父Component:构建器
this.el = Ext.get(el); 
Ext架构分析(3)--Widget之父Component:构建器
this.render(this.el.dom.parentNode); 
Ext架构分析(3)--Widget之父Component:构建器}
 
Ext架构分析(3)--Widget之父Component:构建器

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

上一篇:关于OpenLDAPAdmin管理页面提示“This base cannot be created with PLA“问题


下一篇:Spark Streaming 误用.transform(func)函数导致的问题解析