Ext架构分析(4)Container之旅

 BoxComponent继承了Component，主要是实现了设置组件的宽度、高度以及位置（相对于容器或相对于document.body),他的实现较为简单，需要注意的是:
    1.BoxComponent可以通过resizeEl属性设置进行调整大小的对象，positionEl属性设置调整位置的对象，并且在render事件中进行设置，将属性封装为Ext.element对象；
    2.setSize和setPosition方法是在afterRender事件中被触发的，换句话说，组件调整位置和大小是在渲染后进行的。 

onRender : function(ct, position){ 
Ext.BoxComponent.superclass.onRender.call(this, ct, position); 
if(this.resizeEl){ 
  this.resizeEl = Ext.get(this.resizeEl); 
} 
if(this.positionEl){ 
  this.positionEl = Ext.get(this.positionEl); 
} 
}, 
afterRender : function(){ 
Ext.BoxComponent.superclass.afterRender.call(this); 
this.boxReady = true; 
this.setSize(this.width, this.height); 
if(this.x || this.y){ 
  this.setPosition(this.x, this.y); 
}else if(this.pageX || this.pageY){ 
  this.setPagePosition(this.pageX, this.pageY); 
} 
} 

  Ext.Containr继承了BoxComponent，在他的initComponent方法中，增加了对以下事件的支持： 'afterlayout','beforeadd','beforeremove','add','remove'。
Container主要实现了对layout和items的管理。

  首先，让我们看一下Container对于items的管理：
  你可能会发现大部分的Widget都支持在构建器中传入一个items数组以非常方便的形式构建该Widget的子组件，而该数组大部分情况是由json构成，让我们看个例子：

new Ext.menu.Menu({ 
id: 'mainMenu', 
items: [ 
{ 
text: 'I like Ext', 
checked: true,   // when checked has a boolean value, it is assumed to be a CheckItem 
checkHandler: onItemCheck 
}, 
{ 
text: 'Ext for jQuery', 
checked: true, 
checkHandler: onItemCheck 
}, 
{ 
text: 'I donated!', 
checked:false, 
checkHandler: onItemCheck 
}, '-',  

那么，这些json对象看不到表示任何对象类型的属性（xtype），Widget是怎样正确解析这些json对象的呢？ 魔术就发生在Container中，首先，在Container的构建器中，有如下的语句：

var items = this.items;//如果传递了items对象 
if(items){ 
delete this.items; 
if(items instanceof Array){//items对象可以是数组，也许这样写更清楚些：this.add(items) 
this.add.apply(this, items); 
}else{ 
this.add(items); 
} 
} 

实际上，大多Widget都有自己的缺省的add的实现以满足自身的要求，Container也提供了一个缺省的add方法的实现如下：

add : function(comp){ 
if(!this.items){//如果未实现items数组,创建items数组 
this.initItems(); 
} 
var a = arguments, len = a.length;//如果传入的是数组则对每个元素进行递归调用add方法 
if(len > 1){ 
for(var i = 0; i < len; i++) { 
this.add(a); 
} 
return; 
} 
//this.applyDefaults(comp)方法对元素设置了缺省属性，注意到此时为止，还没有生成相应的组件，现在的item对象依然还是一个简单的json对象。lookupComponent方法则会生成元素组件 
var c = this.lookupComponent(this.applyDefaults(comp));   
var pos = this.items.length; 
if(this.fireEvent('beforeadd', this, c, pos) !== false && this.onBeforeAdd(c) !== false){ 
this.items.add(c); 
//把每个子元素的ownerCt设置成Container自己 
c.ownerCt = this; 
//触发add事件 
this.fireEvent('add', this, c, pos); 
} 
return c; 
}, 

让我们看一下lookupComponent方法的实现：

lookupComponent : function(comp){ 
if(typeof comp == 'string'){ 
//如果传入的是字符串，进行查找 
return Ext.ComponentMgr.get(comp); 
}else if(!comp.events){ 
//如果是对象，但不是继承自Observable的对象（在这里，即不是Widget组件对象）,则新建一个对象，这就是我们前面讨论的情况，传入的是配置数组。 
return this.createComponent(comp); 
} 
return comp; 
}, 

魔术的答案在这里，createComponent 方法的实现：

createComponent : function(config){ 
//this.defaultType是"panel",Container缺省实现是根据传入的json对象创建相应的panel 
return Ext.ComponentMgr.create(config, this.defaultType); 
}, 

而ComponentMgr的create方法的实现也很简单：

create : function(config, defaultType){ 
return new types[config.xtype || defaultType](config); 
} 

最终，秘密揭晓，Container的缺省实现将根据传入的items数组中的每个item的xtype属性进行子元素的创建。如果在item中未指定xtype,则根据配置创建panel.

Ext.Container除了通过add()方法，还提供了insert()，remove()等方法实现了对items的维护。在item中的每个元素被加入items之前，都调用beforeAdd方法，如果返回值为true,则该元素元素被设置缺省属性（通过applyDefaults方法），并吧ownerCt属性赋为container，然后加入items,并触发add事件。


Container还提供了两个很有用的方法：bubble和cascade。
bubble方法实现了一个方法在父容器中的递归调用，当然，只要方法在任何一个父容器中返回false,则调用被终止；
cascade方法则实现了方法在容器的子元素中被调用；
需要指出的是，如果未设置任何layout，则container返回ContainerLayout:

getLayout : function(){ 
if(!this.layout){ 
var layout = new Ext.layout.ContainerLayout(this.layoutConfig); 
this.setLayout(layout); 
} 
return this.layout; 
} 

让我们再看一下对于layout的管理，通过render方法，Container设置了layout对象并调用了doLayout方法：

render : function(){ 
    Ext.Container.superclass.render.apply(this, arguments); 
  if(this.layout){ 
      if(typeof this.layout == 'string'){ 
        this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig); 
      } 
      this.setLayout(this.layout); 
      if(this.activeItem !== undefined){ 
          var item = this.activeItem; 
          delete this.activeItem; 
          this.layout.setActiveItem(item); 
          return; 
      } 
  } 
  if(!this.ownerCt){ 
      this.doLayout(); 
  } 
  if(this.monitorResize === true){ 
      Ext.EventManager.onWindowResize(this.doLayout, this); 
  } 
} 

doLayout方法则调用自己的layout对象的layout方法并遍历items中的元素，逐个调用layout方法：

if(this.rendered && this.layout){ 
    this.layout.layout(); 
} 
if(this.items){ 
    var cs = this.items.items; 
    for(var i = 0, len = cs.length; i < len; i++) { 
      var c = cs; 
      if(c.doLayout){ 
          c.doLayout(); 
      } 
  } 
}