小谈Ext架构-Container之旅

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();
      }
  }
}