透析Extjs源码之layout(一)layout的实现

1、配置选项layout什么时候可用?
只有Ext.Container的子类或子孙类才具有layout的功能,
如果在这些子孙类中不指定layout的配置选项,那么layout就有个默认值是'auto',即为Ext.layout中的超类:Ext.layout.ContainerLayout。
每个layout类,看layout包下的类,都是直接或间接的继承了Ext.layout.ContainerLayout,并且每个layout类都会注册到Ext.Container.LAYOUTS中去,如:Ext.Container.LAYOUTS['form'] = Ext.layout.FormLayout;
这样就可以结合配置选项layout的值来获得对应的布局类实例对象:
Container.js文件第204行:
if(typeof this.layout == 'string'){
                this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);
            }

第209行代码:
if(this.activeItem !== undefined){
                var item = this.activeItem;
                delete this.activeItem;
                this.layout.setActiveItem(item);
                return;
            }

拥有activeItem和setActiceItem功能的布局类才具有这个激活项功能,比如:Ext.layout.CardLayout,在目前所提供的布局类中就只有这个Ext.layout.CardLayout才有这个功能。

2、doLayout的条件?
看Container.js文件第216行:
if(!this.ownerCt){
            this.doLayout();
        }

也就是布局执行前还没有指定要渲染的容器。

3、什么时候执行布局?
在发生渲染(执行render()方法)时(当new时,如果指定了renderTo配置选项值,那么在其超类Component的构造器中最后也会执行render()方法),
看Container.js文件第202行:
Ext.Container.superclass.render.apply(this, arguments);

是先去执行BoxComponent的render()方法,BoxComponent继承了Component,它的render()方法就是Component的render()方法。
所以,它是在render()后发生的。

你可能感兴趣的:(ext)