布局用于定义容器如何组织内部子元素和控制子元素的大小。

  ExtJS中有两种类型的布局:Container容器类布局与Component组件类布局。

  Containter容器类布局:负责容器内容Extjs元素和调整Extjs元素的大小。

    包括:Border布局、Box布局、Fit布局等等。

  Component组件类布局:负责组织组件的HTML元素。

    包括:Dock布局、Toolbar布局、Field布局、TriggerField布局。 


  一、Container布局:

  我们首先拿一张图来看看Container布局的层级关系:

  

  1、Auto布局:

    当没有为容器(Container或其子类实例)配置layout配置项时就默认使用Auto布局。

       特点:
         (1) 容器子元素不随容器大小变化而变化;
         (2) 容器子元素按添加到容器的顺序自上而下排列。
    ps:当用百分比来设置宽度的时候,其宽度为容器宽度的相应百分比数,不过在Chrome浏览器中运行时,用百分比设置宽度会出现没有右边框的异常。
  
  2、Anchor布局:
    特点:

         (1) 容器子元素会随容器大小而变化;
         (2) 子元素按添加到容器的次序,自上而下的排列;
         (3) 子元素默认宽度为容器的body宽度;

    (4) 通过子元素的x、y配置项可设置子元素离原来位置的左边距和上边距。

         当容器的layout设置为anchor时,若要定制子元素的布局时就需要配置子元素的anchor配置项。

    配置项:

      (1) 负数表示子元素离父容器右内边框、下内边框的距离;

      (2)正数表示子元素离父容器左内边框、上内边框的距离;

      (3)百分数表示子元素占父容器宽度、高度的百分比;

      (4)数字与百分比可以混用。

  3、Absolute布局:

    AbsoluteLayout是AnchorLayout的子类,其继承了AnchoreLayout的所有特性。并且可以设置x和y配置项来相对于父容器来定位子元素。

       特点: 
      (1) 容器子元素会随容器大小而变化;
      (2) 子元素默认宽度为容器的body宽度;
          (3) 子元素默认位置为容器的左上角(x:0,y:0),就是不设置各子元素的x、y配置项时,所有子元素会在容器的左上角重叠;
         (4) 子元素通过x、y配置项来设置子元素离容器左内边框、上内边框的距离。
    ps:子元素的anchor属性,对于高度使用百分比值时,每个子元素的最终的值都是“百分比*父容器的剩余高度”,父容器的剩余高度=父容器的高度-较早添加到容器的子元素高度。所以子元素添加到容器的次序将在使用百分比设置子元素anchor属性高度时起作用。
 
  4、HBox布局和VBox布局:
    HBox布局与VBox布局相似,差别在于前者用于组织子元素在容器内部水平方向的布局,后者则为垂直方向的布局。
    特点:
      (1) 容器子元素会随容器大小而变化;
      (2) 通过三个可选的配置项来组织子元素相对于容器的宽和高。
    配置项:
        (1) flex:子元素配置项。各个子元素的的flex配置项会相互作用来决定子元素在容器内的宽度(HBox)或者高度(VBox)。以VBox为例,如子元素1的flex为1,而子元素2的flex为2,而容器高度为90,那么子元素1的高度就为30,而子元素2的高度为60,HBox亦然。

           (2) align:layout属性配置项。设置各个子元素的垂直方向的对齐,可选值有:
                  left:默认值,左对齐;
                    center:中心线对齐;
                    strech:使各个子元素的宽度(HBox)或者高度(VBox)为容器body的宽度(HBox)或者高度(VBox)来对齐;
                    strechmax:以最宽的子元素的宽度(HBox)或者高度(VBox)作为其他各个子元素的宽度(HBox)或者高度(VBox)来对齐。
           (3) pack:layout属性配置项。设置所有子元素组成的元素块是紧靠容器的左、中、右中哪个位置,可选值有:
                    start:默认值,靠容器的左边;
                    center:靠中间;
                    end:靠容器的右边。
    
  5、Accordion布局:
    Accordion布局是VBox布局的子类。与VBox布局不同的是Accordion布局仅仅会展现其中一个子元素而其余子元素将被折叠起来。
      特点:

         (1) 容器子元素会随容器大小而变化;
         (2) 仅仅会展现其中一个子元素而其余子元素将被折叠起来或仅仅展现部分子元素而其他元素被折叠。
    配置项:
         (1) multi:layout配置项的属性。默认为false,true表示可以同时展现多个子元素;
         (2) collapseFirst:子元素的配置项。默认为false,false表示expand/collapse按钮在标题工具按钮栏的最左边,true表示在最后边。(关于标题工具按钮栏Ext.panel.Tool我们将在后面学习)
         (3) animate:子元素的配置项。默认为true,false为执行expand/collapse操作时没有动画效果
         (4) fill:layout配置项的属性。默认为true,true表示expand的子元素高度将为整个容器剩余高度,false表示expand的子元素高度为自身的高度
 
  6、Table布局:
     使用Table布局那么将生成HTML的Table标签来作为布局的容器。

         特点:
          (1) 可通过配置来设置容器子元素的大小是否随容器的大小变化
       配置项:
      (1) columns:设置表格布局的列数;
         (2) tableAttrs:设置表格的属性(如style等)
         (3) trAttrs:设置行的属性
         (4) tdAttrs:设置单元格的属性
         (5) colspan:设置跨列数目
         (6) rowspan:设置跨行数目
         1、2、3和4为layout配置项的属性,5、6为子元素的配置项。
      注意:子元素的排列次序为由左至右,由上到下。
 
  7、Column布局:
    Column布局为Auto布局的子类,用于设置子元素的宽度。

       特点:
         (1) 容器子元素的宽度会随容器宽度而变化;
         (2) 容器子元素的高度不随容器高度而变化;  
       配置项:
         columnWidth:子元素配置项。设置子元素的宽度(值必须为百分数或小于1的小数)。
 
  8、Fit布局:
    Fit 布局是容器内只能显示一个子元素,若设置多个子元素,则只显示第一个子元素。

       特点:
            (1) 容器内只能显示一个子元素,若设置多个子元素,则只显示第一个子元素。
            (2) 容器子元素随容器大小变化。
 
  9、Card布局:
    Card布局是Fit布局的子类。

       特点:
         (1) 容器内只能显示一个子元素,若设置多个子元素,则只显示第一个子元素;
         (2) 可通过设置setActiveItem方法来展示其他子元素;
         (3) 容器子元素随容器大小变化。
 
  10、Border布局:
    Border布局将容器分为五个区域:north、south、east、west和center。如图:
    
    其中,除了Center为必填项以外,其余都是选填项。配置时不需要设置Center的高度与宽度,浏览器自会根据工作区的高宽减去North、South、West、East的高宽,用Center充满剩余部分空间。
 
  11、Form布局:
    Form布局会将表单中所有的输入框纵向的依次的排列,且宽度与容器宽度相等。
    其相对于Column布局,Form布局为垂直从上到下,Column布局为水平从左到右。
    特点:

            (1) 内部的子元素的宽度为容器body的宽度,并随容器的大小变化而变化;
            (2) 属于Ext.form.field包下的内部子元素的padding属性将失效。
  

  二、Component布局
  Component布局负责组织组件内部的HTML元素。Toolbars、Headers和表单的Fields中均有应用到。
  
  1、Dock布局:
    主要应用在panel类组件上。该布局已在组件内部设置并用于panel的Headers和Toolbars中。
 
  2、Tool布局:
    Ext.panel.Header中包含Ext.panel.Tool的0到N个实例a。而这些Ext.panel.Tool实例就是通过Tool布局来组织其关系。
    Ext框架提供25种类型的Ext.panel.Tool,通过Ext.panel.Panel的tools配置项来设置Ext.panel.Tool实例。要注意的一点是,Ext框架提供的Ext.panel.Tool仅包含按钮图标而具体的点击事件处理函数需要我们自定义。
    实现效果:
    
 
  3、Field布局:
    表单布局。
  
  4、TrigerField布局:
     TriggerField布局是Field布局的扩展。Combox、DatePicker等组件都是用TriggerField布局。

【ExtJS】 布局Layout的更多相关文章

  1. Extjs布局——layout: 'card'

    先看下此布局的特性: 下面演示一个使用layout: 'card'布局的示例(从API copy过来的)——导航面板(注:导航面板切换下一个或上一个面板实际是导航面板的布局--layout调用指定的方 ...

  2. ExtJs常用布局--layout详解(含实例)

    序言: 笔者用的ExtJs版本:ext-3.2.0 ExtJs常见的布局方式有:border.form.absolute.column.accordion.table.fit.card.anchor ...

  3. ExtJS 布局-Border 布局(Border layout)

    更新记录: 2022年6月11日 发布. 2022年6月1日 开始. 1.说明 边框布局允许根据区域(如中心.北部.南部.西部和东部)指定子部件的位置.还可以调整子组件的大小和折叠. 2.设置布局方法 ...

  4. ExtJs布局详解

    序言 1.百度百科上说:ExtJs功能丰富,无人能出其右.无论是界面之美,还是功能之强,extjs都高居榜首. 2.呵呵,界面之美当是少不了布局的,这篇文章我写layout的七种布局.(extjs是4 ...

  5. Duilib源码分析(五)UI布局—Layout与各子控件

    接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...

  6. jquery easy ui 1.3.4 布局layout(4)

    4.1.easyui布局-layout 在easyui里面只有一种布局方式,layout(东.南.西.北.中)的布局方式,创建layout布局的方式如下: <div id="cc&qu ...

  7. [转]struct实例字段的内存布局(Layout)和大小(Size)

    在C/C++中,struct类型中的成员的一旦声明,则实例中成员在内存中的布局(Layout)顺序就定下来了,即与成员声明的顺序相同,并且在默认情况下总是按照结构中占用空间最大的成员进行对齐(Alig ...

  8. jQuery Easy UI (适应屏幕分辨率大小)布局(Layout)

    一.jQuery Easy UI (适应屏幕分辨率大小)布局(Layout) 1.首先应用的是jquery-easyui-1.4 版本(版本不同,兼容性不同) 2.实现整个页面的布局( layout: ...

  9. WPF笔记(2.7 文字布局)——Layout

    原文:WPF笔记(2.7 文字布局)--Layout 这一节介绍的是文字布局的几个控件:1.TextBlock      最基本的文字控件可以配置5个Font属性.TextWraping属性,&quo ...

  10. sencha touch 入门系列 (九) sencha touch 布局layout

    布局用来描述你应用程序中组件的大小和位置,在sencha touch中,为我们提供了下面几种布局: 1.HBox: HBox及horizontal box布局,我们这里将其称为水平布局,下面是一段演示 ...

随机推荐

  1. 基于JDBC的数据库连接池技术研究与应用

    引言 近年来,随着Internet/Intranet建网技术的飞速发展和在世界范围内的迅速普及,计算机 应用程序已从传统的桌面应用转到Web应用.基于B/S(Browser/Server)架构的3层开 ...

  2. Reporting Service服务SharePoint集成模式安装配置(7、配置SharePoint2010产品)

    在第3步安装完成SharePoint2010产品后,没有选择[立即安装产品配置向导],这一小节将单独配置SharePoint2010产品数据库(管理中心). 1)启动SharePoint 2010 产 ...

  3. Java 连接、操控数据库总结(JDBC)

    看到数据库连接不由得想起了大一末参加团队考核时的悲催经历~~,还记得当初傻傻地按照书本的代码打到 Eclipse 上,然后一运行就各种报错...报错后还傻傻地和书本的代码一遍又一遍地进行核对,发现无误 ...

  4. [Asp.net Mvc]为js,css静态文件添加版本号

    方式一: 思路 string version = ViewBag.Version; @Scripts.RenderFormat("<script type=\"text/ja ...

  5. 启动redis一闪就关

    解决方法:1-win+R 打开命令行2-cd至redis目录,例如 D:\redis>3-输入 redis-server.exe redis.windows.conf观察是否如图1:至此,已成功 ...

  6. Entity Framework 6 暂停重试执行策略

    EF6引入一个弹性连接的功能,也就是允许重新尝试执行失败的数据库操作.某些复杂的场景中,可能需要启用或停用重试执行的策略,但是EF框架暂时尚未提供直接的设置开关,将来可能会加入这种配置.幸运的是,很容 ...

  7. [TJOI2007] 线段

    因为每行必须走完才能到下一行,所以我们有两种决策: 1.最后留在线段左端点 2.最后留在线段右端点 这种存在状态转移且多决策的问题用动态规划来进行递推是最好不过的了. 所以我们设\(dp[i][0/1 ...

  8. 驼峰转大写(javaScript)

    var a = function(s){return s.replace(/([A-Z])/g,"_$1").toUpperCase();} F12控制台可以直接用

  9. Ruby 和 OpenSSL CA 证书的问题

    作为一个版本控,总是希望保持电脑中各种软件到最新版本. 最近通过 brew 升级 OpenSSL 和 ruby-build 到最新,尤其是 ruby-build 支持最新的 Ruby 2.2.1,新版 ...

  10. 「案例」让房东在 Airbnb 上展示他们的热情好客

    如何才能让房东准确的描述自己的房源,如何才能让房东充分的展示自己的房源.Airbnb 在这次更新里尝试去解决了这两个问题,让我们跟随作者的文笔去了解一下整个项目的经过. 关于本文 原文作者:Cecil ...