透析Extjs源码之layout（一）layout的实现

最新推荐文章于 2021-07-06 17:00:31 发布

最新推荐文章于 2021-07-06 17:00:31 发布 · 203 阅读

文章标签：

#EXT

ExtJs 专栏收录该内容

17 篇文章

订阅专栏

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行：

Js代码

if(typeof this.layout == 'string'){
this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);
}

if(typeof this.layout == 'string'){
                this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);
            }

第209行代码：

Js代码

if(this.activeItem !== undefined){
var item = this.activeItem;
delete this.activeItem;
this.layout.setActiveItem(item);
return;
}

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行：

Js代码

if(!this.ownerCt){
this.doLayout();
}

if(!this.ownerCt){
            this.doLayout();
        }

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

3、什么时候执行布局？
在发生渲染（执行render()方法）时（当new时，如果指定了renderTo配置选项值，那么在其超类Component的构造器中最后也会执行render()方法），
看Container.js文件第202行：

Js代码

Ext.Container.superclass.render.apply(this, arguments);

Ext.Container.superclass.render.apply(this, arguments);

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