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

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