Ext架构分析(5)--Layout初识:ContainerLayout

  如果学习了Container,你回发现,在Ext2.0中,Container和Layout的关系是密不可分的。任何Container都需要在render方法中使用layout对象进行布局。
  让我们先看一下所有layout的父类:ContainerLayout。
  实际上,对容器及其item的渲染都是在layout对象的layout方法中实现的。而layout方法是在resize事件中触发的,基于性能的考虑,可以通过配置bufferResize属性实现延迟layout:
Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayout  onResize: function()Ext架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayout    
if(this.container.collapsed)Ext架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayout        
return;
Ext架构分析(5)--Layout初识:ContainerLayout    }

Ext架构分析(5)--Layout初识:ContainerLayout    
var b = this.container.bufferResize;
Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayout    
if(b)Ext架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayout        
if(!this.resizeTask)Ext架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayout          
this.resizeTask = new Ext.util.DelayedTask(this.layout, this);
Ext架构分析(5)--Layout初识:ContainerLayout          
this.resizeBuffer = typeof b == 'number' ? b : 100;
Ext架构分析(5)--Layout初识:ContainerLayout        }

Ext架构分析(5)--Layout初识:ContainerLayout        
this.resizeTask.delay(this.resizeBuffer);
Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayout    }
elseExt架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayout        
this.layout();
Ext架构分析(5)--Layout初识:ContainerLayout    }

Ext架构分析(5)--Layout初识:ContainerLayout  }


  lyout方法会遍历所有的Container子元素并对其进行render:
 
Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayoutrenderItem : function(c, position, target)Ext架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayout    
if(c && !c.rendered)Ext架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayout        c.render(target, position);
Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayout        
if(this.extraCls)Ext架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayout        
var t = c.getPositionEl ? c.getPositionEl() : c;
Ext架构分析(5)--Layout初识:ContainerLayout        t.addClass(
this.extraCls);
Ext架构分析(5)--Layout初识:ContainerLayout        }

Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayout        
if (this.renderHidden && c != this.activeItem) Ext架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayout          c.hide();
Ext架构分析(5)--Layout初识:ContainerLayout        }

Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayout    }
else if(c && !this.isValidParent(c, target))Ext架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayout        
if(this.extraCls)Ext架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayout          c.addClass(
this.extraCls);
Ext架构分析(5)--Layout初识:ContainerLayout        }

Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayout        
if(typeof position == 'number')Ext架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayout          position 
= target.dom.childNodes[position];
Ext架构分析(5)--Layout初识:ContainerLayout        }

Ext架构分析(5)--Layout初识:ContainerLayout        target.dom.insertBefore(c.getEl().dom, position 
|| null);
Ext架构分析(5)--Layout初识:ContainerLayoutExt架构分析(5)--Layout初识:ContainerLayout        
if (this.renderHidden && c != this.activeItem) Ext架构分析(5)--Layout初识:ContainerLayout{
Ext架构分析(5)--Layout初识:ContainerLayout          c.hide();
Ext架构分析(5)--Layout初识:ContainerLayout        }

Ext架构分析(5)--Layout初识:ContainerLayout    }

Ext架构分析(5)--Layout初识:ContainerLayout  }

Ext架构分析(5)--Layout初识:ContainerLayout
Ext架构分析(5)--Layout初识:ContainerLayout
上一篇:Webmin的使用教程


下一篇:Git 使用规范流程【转】