【ExtJS】 布局Layout

---

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

　　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布局。