小谈Ext架构-Layout初识：ContainerLayout

Layout初识：ContainerLayout

 

如果学习了Container,你回发现，在Ext2.0中，Container和Layout的关系是密不可分的。任何Container都需要在render方法中使用layout对象进行布局。
  让我们先看一下所有layout的父类：ContainerLayout。
  实际上，对容器及其item的渲染都是在layout对象的layout方法中实现的。而layout方法是在resize事件中触发的，基于性能的考虑，可以通过配置bufferResize属性实现延迟layout:
  onResize: function(){
    if(this.container.collapsed){
        return;
    }
    var b = this.container.bufferResize;
    if(b){
        if(!this.resizeTask){
          this.resizeTask = new Ext.util.DelayedTask(this.layout, this);
          this.resizeBuffer = typeof b == 'number' ? b : 100;
        }
        this.resizeTask.delay(this.resizeBuffer);
    }else{
        this.layout();
    }
  }

  lyout方法会遍历所有的Container子元素并对其进行render:
  renderItem : function(c, position, target){
    if(c && !c.rendered){
        c.render(target, position);
        if(this.extraCls){
        var t = c.getPositionEl ? c.getPositionEl() : c;
        t.addClass(this.extraCls);
        }
        if (this.renderHidden && c != this.activeItem) {
          c.hide();
        }
    }else if(c && !this.isValidParent(c, target)){
        if(this.extraCls){
          c.addClass(this.extraCls);
        }
        if(typeof position == 'number'){
          position = target.dom.childNodes[position];
        }
        target.dom.insertBefore(c.getEl().dom, position || null);
        if (this.renderHidden && c != this.activeItem) {
          c.hide();
        }
    }
  }