Ext架构分析(5)--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();
        }

    }

  }


posted @ 2008-05-23 22:34 meetrice 阅读(...) 评论(...) 编辑 收藏