`
gkuiyj
  • 浏览: 91016 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Ext架构分析(6)--最简单的layout:AnchorLayout

阅读更多
Ext架构分析(6)--最简单的layout:AnchorLayout
    AnchorLayout是最简单的布局管理其,它只是将元素按照配置的属性在元素容器中进行定位。
    让我们看一下它的render方法以理解如果进行布局:

    onLayout : function(ct, target){
    Ext.layout.AnchorLayout.superclass.onLayout.call(this, ct, target);
    //获取元素的尺寸
    var size = this.getAnchorViewSize(ct, target);
    var w = size.width, h = size.height;
    if(w < 20 || h < 20){
        return;
    }
    // 获取容器的尺寸
    var aw, ah;
    if(ct.anchorSize){
        if(typeof ct.anchorSize == 'number'){
          aw = ct.anchorSize;
        }else{
          aw = ct.anchorSize.width;
          ah = ct.anchorSize.height;
        }
    }else{
    //根据配置获取容器尺寸
        aw = ct.initialConfig.width;
        ah = ct.initialConfig.height;
    }
    //遍历元素,并调用元素的setSize方法,继承自boxComponent的setSize方法则触发resize事件从而触发layout方法。
    var cs = ct.items.items, len = cs.length, i, c, a, cw, ch;
    for(i = 0; i < len; i++){
        c = cs;
        if(c.anchor){
          a = c.anchorSpec;
          if(!a){ // cache all anchor values
            var vs = c.anchor.split(' ');
            c.anchorSpec = a = {
                right: this.parseAnchor(vs[0], c.initialConfig.width, aw),
                bottom: this.parseAnchor(vs[1], c.initialConfig.height, ah)
            };
          }
          cw = a.right ? this.adjustWidthAnchor(a.right(w), c) : undefined;
          ch = a.bottom ? this.adjustHeightAnchor(a.bottom(h), c) : undefined;
          if(cw || ch){
            c.setSize(cw || undefined, ch || undefined);
          }
        }
    }
  },


分享到:
评论

相关推荐

    php-ext-xlswriter-ide-helper:PHP 扩展 Xlswriter IDE 助手

    安装扩大pecl install xlswriterIDE 助手composer require viest/php-ext-xlswriter-ide-helper:dev-master文档

    ext3.0-2009-9-14 17:00:20

    通过分析、编译和使用ext3.0,可以了解文件系统的工作原理,这对于Linux系统管理员和开发人员来说是非常有价值的。 【标签】"ext3.0" 是对这个压缩包内容的标识,表明文件与ext3.0文件系统紧密相关。在Linux社区,...

    ext-2.0 ext-2.0 ext-2.0 ext-2.0 ext-2.0

    ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0

    jcifs-ext-0.9.4.jar

    解压即可得到jcifs-ext-0.9.4.jar, java环境资源,jdk1.6及以上

    openwrt-23.05.2-x86-64-generic-ext4-combined-efi.img.gz

    openwrt软路由

    EXT学习札记--京华志

    - 需要先加载`ext-base.js`文件,再加载`ext-all.js`文件,这是因为前者包含了后者运行所需的基础功能。 - 在某些情况下,还需要设置页面的字符集编码,例如`&lt;meta http-equiv="Content-Type" content="text/html;...

    ext-air-3.1.0和ext-core-3.1.0

    标题中的"ext-air-3.1.0"和"ext-core-3.1.0"分别代表了两个JavaScript库,这是Ext JS框架的两个不同版本。Ext JS是一个强大的客户端JavaScript库,用于构建富互联网应用程序(RIA)。让我们深入探讨这两个组件。 1....

    ext -jar ext -jar第二部分

    【标题】"ext -jar ext -jar第二部分" 涉及的是在Java环境中使用`ext`和`jar`命令来扩展和管理JAR(Java Archive)文件的相关知识。这通常指的是通过`-extdirs`选项指定扩展目录,以及使用`jar`命令创建、更新或提取...

    commonmark-ext-yaml-front-matter-0.12.1.jar

    java运行依赖jar包

    extjs控件列表

    **Ext.Button** - **描述**: 提供了一种标准的用户交互方式,通常用于触发特定事件或功能。 - **用途**: 创建按钮,可以设置图标、文本、工具提示等。 **Ext.SplitButton** - **描述**: 一种带有下拉菜单的按钮,...

    CEIC-EXT4-Bit-By-Bit

    ### 关于 CEIC-EXT4-Bit-By-Bit 的详解 #### 一、EXT4 文件系统的概述 在深入探讨之前,我们先来了解一下 **EXT4**(第四扩展文件系统)。EXT4 是 Linux 操作系统中广泛使用的一种高性能日志式文件系统,它基于其...

    Ext-JS-4.1-Beta-3.zip

    3. **ext-all-dev.js, ext-all-debug-w-comments.js, ext-all-debug.js, ext-all.js, ext-debug.js, ext.js**:这些都是Ext JS的核心库文件,不同文件的用途各有侧重: - `ext-all-dev.js`:包含了所有组件和功能,...

    bcprov-ext-jdk16-1.45.jar

    bcprov-ext-jdk16-1.45.jar资源包 ,在进行JAVA的ECC椭圆算法调用时,需要用到的jar包

    Ext组件描述,各个组件含义

    ### Ext组件概述与详解 #### 一、Ext基础组件 **1.1 Box Component (Ext.BoxComponent)** - **xtype**: `box` - **功能描述**:Box Component 是一个非常基本的 Ext 组件,主要用于定义具有边框和其他布局属性的...

    Chrome浏览器进行EXT开发

    ### Chrome浏览器进行EXT开发知识点详解 #### 一、Chrome浏览器及其开发工具概述 - **版本**: 本篇基于Chrome浏览器14.0.835.2版本进行讲解。 - **选择Chrome的原因**: 作者对Chrome情有独钟,认为其开发工具功能...

    ext-ms-win-gdi-desktop-l1-1-0.dll

    ext-ms-win-gdi-desktop-l1-1-0.dll 用于解决这个dll文件丢失问题,下载后将此文件放置在相关文件根目录下,即可解决丢失问题

    Ext JS框架 经验之作2000页

    ### Ext JS框架 经验之作2000页 #### 概述 本文档旨在提供一个全面且深入的指南,帮助读者理解并掌握Ext JS框架的各个方面。Ext JS是一款非常强大的JavaScript库,用于构建交互式的Web应用程序。它以其丰富的组件库...

    Ext10种布局

    - **定义**:通过 `Ext.layout.AnchorLayout` 类定义,布局名称为 `anchor`。 - **功能**:根据容器大小定位其包含的子面板。 - **定位方式**: - 百分比定位:如 `anchor: '100%'` 表示子面板占满容器宽度。 - ...

Global site tag (gtag.js) - Google Analytics