如果学习了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();
}
}
}
让我们先看一下所有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(); } } }
