`

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

EXT 
阅读更多

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代码 复制代码
  1. if(typeof this.layout == 'string'){   
  2.                 this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);   
  3.             }  
if(typeof this.layout == 'string'){
                this.layout = new Ext.Container.LAYOUTS[this.layout.toLowerCase()](this.layoutConfig);
            }


第209行代码:

Js代码 复制代码
  1. if(this.activeItem !== undefined){   
  2.                 var item = this.activeItem;   
  3.                 delete this.activeItem;   
  4.                 this.layout.setActiveItem(item);   
  5.                 return;   
  6.             }  
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代码 复制代码
  1. if(!this.ownerCt){   
  2.             this.doLayout();   
  3.         }  
if(!this.ownerCt){
            this.doLayout();
        }


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

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

Js代码 复制代码
  1. Ext.Container.superclass.render.apply(this, arguments);  
Ext.Container.superclass.render.apply(this, arguments);


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

分享到:
评论

相关推荐

    ExtJs源码

    extjs 源码,有兴趣的可以学习下

    extjs 源码

    EXTJS 3.0是其历史版本之一,提供了一套完整的组件模型、数据绑定、布局管理以及丰富的用户界面控件。这个源码包不仅包含了EXTJS 3.0的核心库,还提供了相关的文档和代码示例,这对于开发者深入理解EXTJS的工作原理...

    Extjs源码之--Ext事件机制/继承关系

    在EXTJS这个强大的JavaScript框架中,事件机制是其核心组件之一,它允许组件之间进行通信和交互。在“Extjs源码之--Ext事件机制/继承关系”中,我们将深入探讨EXTJS如何处理事件以及其类层次结构。EXTJS的事件处理...

    ExtJS layout的9种样式详解

    ExtJS布局是构建用户界面的关键部分,它定义了组件如何在容器中排列和展示。本文将详细介绍ExtJS的9种布局样式,帮助开发者更好地理解和应用这些布局。 1. **Absolute Layout**: Absolute布局允许你在容器内根据...

    extjs 常用控件的使用 table layout

    `Table Layout`是EXTJS中的布局类型之一,它将容器内的控件按照表格的形式排列。在使用Table Layout时,你需要指定列的数量,并且每个控件会被分配到一个单元格中。以下是一些关于Table Layout的关键点: 1. **...

    Extjs4 layout 布局

    用extjs4搭的一个简单布局框架

    extJS myeclipse源码示例

    extJS myeclipse源码示例

    ExtJS3.0 源码分析与开发实例宝典

    ExtJS3.0 源码分析与开发实例宝典

    extjs 的 源码包

    一个extjs的源码包.其中包括extjs的例子和文档.

    ExtJS源码分析与开发实例宝典

    资源名称:Ext JS源码分析与开发实例宝典内容简介:本书全面系统地剖析了ExtJS 3.0的架构设计原理。通过对源码的“抽丝剥茧”,读者可以掌握Ext JS架构的精妙,从原理层面用活Ext JS。此外,本书还提出了大量的解决...

    深入浅出extjs 源码

    这本书正是为了破解这一难题而生,它涵盖了ExtJS的核心概念、设计模式以及源码实现细节。 在书中,作者首先会介绍ExtJS的基本架构,包括MVC模式的应用、组件系统、布局管理、数据绑定等关键部分。MVC模式是ExtJS...

    extjs源码及API

    extjs下载 extjs源码 extjsApi,全部包括在这里面

    ExtJs源码分析与学习—ExtJs核心代码(一)

    NULL 博文链接:https://linder0209.iteye.com/blog/865372

    ExtJs4 layout 布局

    ExtJs4 layout 布局 这是鄙人之前自学Ext时收集的文档,详细讲诉了各种布局,并附源码与界面展示,希望能给你带来帮助

    ExtJS源码分析与开发实例宝典4.pdf

    这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...

    ExtJS源码分析与开发实例宝典2.pdf

    这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...

    ExtJS源码分析与开发实例宝典0.pdf

    这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...

    ExtJS源码分析与开发实例宝典1.pdf

    这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...

    EXTJS 源码3.4

    extjs源码3.4 里面有其他JS,直接调用就行

    ExtJs源码上传和下载

    总的来说,理解和掌握ExtJs的源码上传和下载是每个开发者必备的技能之一,而`ext-3.3.1`作为一个经典的版本,不仅提供了丰富的功能,也为开发者提供了学习和研究的宝贵资源。通过深入研究源码,你可以更好地掌握Web...

Global site tag (gtag.js) - Google Analytics