小谈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 = newExt.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();
? ? ? ? }
? ? }
? }
?
