沥青道路大样图:ExtJs页面布局总结

EXT标准布局类
面板相当于一张干净的白纸，如果直接在上面添加内容，将很难控制面板中内容的显示位置，面板元素越多就越显得凌乱，所以需要在面板上划分不同的区域，将面板内容展示到希望的位置上。ExtJS通过提供多种布局类来为面板提供支持，主要包括如下10种：
ContainerLayout（容器布局）
FitLayout（自适应布局）
AccordionLayout（折叠布局）
CardLayout（卡片式布局）
AnchorLayout（锚点布局）
AbsoluteLayout（绝对位置布局）
FormLayout（表单布局）
ColumnLayout（列布局）
TableLayout（表格布局）
BorderLayout（边框布局）
接下来分别介绍这10种布局类的特点及使用方式。
1  ContainerLayout容器布局
Ext.layout.ContainerLayout 提供了所有布局类的基本功能，它没有可视化的外观，只是提供容器作为布局的基本逻辑，这个类通常被扩展而不通过 new 关键字直接创建。如果面板（panel）没有指定任何布局类，则它将会作为默认布局来创建，表5-4是主要配置项。
表5-4  Ext.layout.ContainerLayout主要配置项目表
配置项
参数类型
说明
activeItem
String/Number
一个对当前活动组件的引用。activeItem只在那些一次只能显示一个 items 项目的布局中生效，例如：Ext.layout.Accordion、Ext.layout.CardLayout、Ext.layout.FitLayout
2  FitLayout自适应布局
Ext.layout.FitLayout 是布局的基础类，对应面板布局配置项（layout）的名称为 fit，使用 fit 布局将使面板子元素自动充满容器，如果在当前容器中存在多个子面板则只有第一个会被显示。
注意：在本节的示例之前会简单的介绍新概念，组件的xtype类型。xtype类型相当于组件的别名，通过使用xtype类型可以实现组件的延时创建。在后续的示例中会大量使用xtype来创建组件，这将有利于读者形成使用xtype的习惯，而减少new关键字的使用。
下面是自适应布局的一个简单的示例。
代码5-7：FitLayout（自适应布局）示例

在代码5-7中共为外层面板添加了2个子面板，title分别是“嵌套面板一”和“嵌套面板二”，并指定外层面板的布局类型为fit，由图 5-11可以看到“嵌套面板一”充满了整个外层面板，而“嵌套面板二”并没有显示出来。运行效果如图5-11所示。

图5-11 Ext.layout.FitLayout布局示例
3  AccordionLayout折叠布局
Ext.layout.Accordion 扩展自 Ext.layout.FitLayout 布局，对应面板布局（layout）配置项的名称为accordion。该布局会包含多个子面板，任何时候都只有一个子面板处于打开状态，每个子面板都内置了对展开和收缩功能的支持。表5-5列出了它的主要配置项目。
表5-5  Ext.layout.Accordion主要配置项目表
配置项
参数类型
说明
activeOnTop
Boolean
是否保持展开的子面板处于父面板的顶端，true则交换当前展开面板到顶端，false则保持原来的位置不动。
animate
Boolean
设置在展开或收缩子面板时是否使用滑动方式，true则采用滑动方式，默认为false。
fill
Boolean
设置子面板是否自动调整高度充满父面板的剩余空间，true则充满，默认为true。
hideCollapse
Tool
Boolean
设置是否隐藏子面板的 “展开收缩” 按钮，true表示隐藏，false表示显示，默认为false。如果设置为true，则应使titleCollapse配置项也为true。
titleCollapse
Boolean
设置是否允许通过点击子面板的标题来展开或收缩面板，true表示允许，默认为true。
下面是折叠布局的一个简单的示例。
代码5-8：AccordionLayout（折叠布局）示例

代码5-8所示Accordion布局可以在多个不同的子面板之间切换，适合于表现大量的分组内容或制作可以伸展的分组菜单，在开发中使用较多的布局类，效果如图5-12~5-13所示。

4  CardLayout卡片式布局
Ext.layout.CardLayout扩展自Ext.layout.FitLayout布局，对应面板布局（layout）配置项的名称为card。该布局会包含多个子面板，任何时候都只有一个子面板处于显示状态，这种布局类经常用来制作向导和标签页。该布局的重点方式是setActiveItem，因为一次只能显示一个子面板，所以切换子面板的唯一途径就是调用 setActiveItem 方法，它接受一个子面板id或索引作为参数。CardLayout布局并没有提供一个子面板的导航机制，导航逻辑需要开发人员自己实现。Ext.layout.CardLayout主要方法如表5-6所示。
表5-6  Ext.layout.CardLayout主要方法表
方法名
说明
setActiveItem(
String/Number item ) : void
根据子面板
id
或索引切换当前显示的子面板
下面是卡片式布局的一个简单的示例。
代码5-9：CardLayout（卡片式布局）示例

代码 5-9 演示了 CardLayout 卡片式布局的使用方式，这里的重点是调用面板布局的setActiveItem方法激活指定id的子面板进行显示，其中changePage函数的用途是计算点击上一页或下一页之后将要显示的子面板id，然后将该id传入到setActiveItem方法中实现子面板的切换。运行效果如图5-14~5-15所示。

5  AnchorLayout锚点布局
Ext.layout.AnchorLayout 是根据容器大小为其所包含的子面板进行定位的布局，对应面板布局（layout）配置项的名称为 anchor。如果容器大小发生变化，所有子面板的位置都会根据规则重新计算，并自动渲染。使用anchor布局需要注意以下配置项的使用。
anchorSize（父容器提供）
anchor 布局提供了 anchorSize 配置项用来设置虚拟容器的大小，默认情况下 anchor 布局是根据容器自身的大小来进行计算定位的，如果提供了 anchorSize 属性则 anchor 布局就会根据该尺寸生成一个虚拟容器，然后根据这个虚拟容器的大小来进行计算定位。
anchor（子容器提供）
加入到使用 anchor布局面板中的子面板也都支持一个 anchor配置项，它是一个包含 2个值的字符串，水平值和垂直值，例如：'100% 50%'，这个值告知父容器应该怎样为加入到其中的子面板进行定位，有效值包括如下3类。
百分比（Percentage）：1-100之间的任意百分比，第1项数值表示子面板占父容器宽度的百分比，第2项数值表示子面板占父容器宽高的百分比，例如'100% 50%'表示，子面板宽度为父容器的 100%，而高度为父容器的 1/2，如果只提供一个值（如：'50%'）则只对子面板的宽度生效，高度保持默认值。
偏移值（Offsets）：任意整数，可以为正数也可以是负数，第1项数值表示子面板到父容器右边缘的偏移量，第2项数值表示子面板到父容器下边缘的偏移量，例如'-50 -100'表示，子面板距父容器的右边缘偏移50像素，即子面板的宽度为父容器的宽度减去50像素；子面板距父容器的下边缘偏移100像素，即子面板高度为父容器的高度减去100像素。如果只提供一个值（如：'-50'）则只对子面板的宽度生效，高度保持默认值。
参考边（Sides）：有效的值包括 'right'（或 'r'）和'bottom'（或 'b'）。要求容器设置固定的大小或提供相应的anchorSize配置项才会有正确的效果，例如'r b'，说明父容器会计算与子容器宽度和高度的差值，然后按父容器体（body）的实际宽度和高度减去这个差值，重新为子面板定位。
以上3种赋值类型可以组合使用，例如'-50 75%'，下面将分别针对这3种情况举例说明。
1.  百分比（Percentage）定位
在代码 5-10 中创建一个使用百分比方式为子面板进行定位的示例，从示例中可以清晰的体会到百分比定位的特点。
代码5-10：百分比（Percentage）定位示例

代码5-10演示了百分比（Percentage）定位的使用方式，其中anchor : '50% 50%'决定了子面板的高度和宽度都为父面板的50%。运行效果如图5-16所示。

图5-16 Ext.layout.AnchorLayout布局示例（百分比定位）
2.  偏移值（Offsets）定位
在代码 5-11 中创建一个使用偏移值为子面板进行定位的示例，从示例中可以清晰的体会到偏移值定位的特点。
代码5-11：偏移值（Offsets）定位示例

代码5-11演示了偏移值（Offsets）定位的使用方式，其中anchor : '-10 -10',决定了子面板到父面板的右边和下边都为10像素。运行效果如图5-17所示。

图5-17 Ext.layout.AnchorLayout布局示例（偏移值定位）
3.  参考边（Sides）定位
在代码 5-12 中创建一个使用参考边为子面板进行定位的示例，从示例中可以清晰的体会到参考边定位的特点。
代码5-12：参考边（Sides）定位示例

代码5-12演示了参考边（Sides）定位的使用方式，其中anchor : 'r b',,决定了子面板将相对于父面板的右边和底边的差值进行定位。运行效果如图5-18所示。

图5-18 Ext.layout.AnchorLayout布局示例（参考边定位）
在代码5-12中使用参考边为子面板进行定位，下面给出了计算过程的简要说明：
宽度计算：
父容器体(body)宽度为 = 298（说明：300减去左右两条边的宽度）
宽度差值为 =  100（说明：父容器体(body)宽度300 – 子容器宽度200）
计算后的子容器宽度为 = 198（说明： 298 - 100）
高度计算：
父容器体(body)高度为 = 123（说明：150减去上下两条边的宽度和header的高度）
高度差值为  =  50（说明：父容器高度150 – 子容器高度100）
计算后的子容器高度为 =  73（说明：123 -50）
6  AbsoluteLayout绝对位置布局
Ext.layout.AbsoluteLayout扩展自Ext.layout.AnchorLayout布局，对应面板布局（layout）配置项的名称为 absolute。它可以根据子面板中配置的 x/y坐标进行定位，并且坐标值支持使用固定值和百分比两种形式。下面是绝对位置布局的简单的示例。
代码5-13：AbsoluteLayout绝对位置布局示例

代码5-13演示了AbsoluteLayout（绝对位置布局）的使用方式，在示例中子面板的x、y配置项决定了它在父面板中的具体位置。运行效果如图5-19所示。

图5-19 Ext.layout.AbsoluteLayout布局示例
7  FormLayout表单布局
Ext.layout.FormLayout是为表单特殊设计的布局，用来管理表单字段的显示，通常情况下直接使用Ext.form.FormPanel表单面板，因为它已经内置了表单布局，并且提供了表单提交、读取等表单的功能。使用form布局的容器可以使用是些表单特有的配置项，它们包括：
hideLabels: (Boolean) ：是否隐藏字段标签，默认为false。
itemCls: (String) ：每个字段项和字段标签上的样式类，默认值为'x-form-item'。
labelAlign: (String) ： 字段标签的对齐方式，默认为空表示左对齐。
labelPad: (Number) ： 字段标签与字段直接的空白，默认为 5，该项只在提供labelWidth配置项的情况下生效。
labelWidth: (Number) ：字段标签的宽度，默认为100。 任何组件都可以加入到表单布局的容器当中，但是扩展自 Ext.form.Field 类的组件可以支持一些表单项的特殊属性，它们包括：
clearCls: (String) ：应用到专门的清除div上的样式，默认为'x-form-clear-left'。
fieldLabel: (String) ：字段标签上的文本，默认为''。
hideLabel: (Boolean) ：设置是否隐藏标签和分割符，默认为false。
itemCls: (String) ：应用到表单字段及标签上的样式类，默认为'x-form-item'。
labelSeparator: (String) ：字段标签和字段本身直接的分隔符，默认为':'。
labelStyle: (String) ：应用到字段标签上的样式类。
Ext.layout.FormLayout主要配置项目如表5-7所示。
表5-7  Ext.layout.FormLayout主要配置项目表
配置项
参数类型
说明
elementStyle
String
应用到每一个布局中元素上的样式类，默认为''
labelSeparator
String
字段标签与字段本身直接的分隔符，默认为':'。 如果布局和面板中同时配置了labelSeparator，则面板中的设置会覆盖布局中的设置。
labelStyle
String
应用到每一个字段标签上的样式类，默认为''。
下面是表单布局的简单的示例，在示例中创建了一个包含用户名和密码2个输入字段的面板，这个面板最终生成的效果与第4章中介绍的FormPanel相同。
代码5-14： FormLayout（表单布局）示例

代码5-14演示了 FormLayout（表单布局）的使用方式，通过表单布局创建的面板与使用FormPanel创建的表单面板功能相同。运行效果如图5-20所示。

图5-20 Ext.layout.FormLayout布局示例
8  ColumnLayout列布局
Ext.layout.ColumnLayout对应面板布局layout配置项的名称为column。这是一种多列风格的布局样式，每一列的宽度都可以根据百分比或固定值来进行设置，高度允许根据内容进行变化，它支持一个特殊的属性 columnWidth，每一个加入到容器中的子面板都可以通过columnWidth配置项指定百分比或使用width配置项指定固定值，来确定列宽。 width 配置项是以像素为单位的固定宽度，必须是大于或等于 1 的数字。columnWidth配置项是已百分比为单位的相对宽度，必须是大于0小于1的小数，例如“.25”。
注意：所有列的columnWidth值相加必须等于1。
1.  指定固定列宽
代码 5-15 中将创建了包含 2 个子面板的列布局示例，并指定列的固定宽度为 100，看下面的代码。
代码5-15：指定固定列宽示例

代码5-15演示了ColumnLayout（列布局）指定固定列宽的用法，子面板的width配置
项用于设置列宽。运行效果如图5-21所示。

图5-21 Ext.layout.ColumnLayout布局示例（固定列宽）
2.  使用百分比指定列宽
在代码5-16中将创建了一个包含2个子面板的列布局示例，并分别指定列的相对宽度 为30%和70%（30%用.3表示,70%用.7表示），看下面的代码。
代码5-16：使用百分比指定列宽示例

代码 5-16 演示了 ColumnLayout（列布局）使用百分比指定列宽的用法，子面板的
columnWidth配置项用于设置列对应的百分比。运行效果如图5-22所示。

图5-22 Ext.layout.ColumnLayout布局示例（百分比列宽）
3.  固定值与百分比结合使用
在代码5-17中创建了包含3个子面板的列布局示例，为“子面板一”指定固定宽度100，“子面板二”相对宽度为30%，“子面板三”的相对宽度为70%，请看下面的代码。
代码5-17：固定值与百分比结合使用示例

在代码5-17中同时使用了固定值和百分比两种方式来指定列宽，通过观察图5-17可以看到，固定值优先于百分比进行计算，也就是说百分比计算的基础宽度是父容器的宽度减去固定列宽之后剩余的宽度值。运行效果如图5-23所示。

图5-23 Ext.layout.ColumnLayout布局示例（固定值与百分比结合）
下面以一个简单的公式进行说明：
第一列宽度 =  100 （说明，第一列是通过width配置项指定的固定值）。
第二列宽度 = （350 – 100 ）* 0.3 （说明：按比例分割剩余宽度）。
第三列宽度 = （350 – 100 ）* 0.7 （说明：按比例分割剩余宽度）。
9  TableLayout表格布局
Ext.layout.TableLayout对应面板布局layout配置项的名称为table。这种比较允许你非常容易的渲染内容到HTML表格中，可以指定列数（columns），跨行（rowspan），跨列（colspan），可以创建出复杂的表格布局。
注意：必须使用layoutConfig属性来指定属于此布局的配置，table布局仅有唯一的布局配置项columns，而包含在其中的子面板会具有rowspan和colspan两个配置项。
下面是表格布局的一个简单的示例。
代码5-18：TableLayout（表格布局）示例

代码5-18演示了TableLayout（表格布局）的使用方式，其中子面板的colspan和rowspan配置项决定了它跨列和跨行的数量，另外需要指出的是，子面板在父面板中是从上到下由左至右进行顺序排列的。效果如图5-24所示。

图5-24 Ext.layout.TableLayout布局示例
10  BorderLayout边框布局
Ext.layout.BorderLayout 对应面板布局 layout 配置项的名称为 border。该布局包含多个子面板，是一个面向应用的UI风格的布局，它将整个容器分为5个部分，分别是：east、south、west、north、center。加入到容器中的子面板需要指定region 配置项来告知容器要加入到那个部分，并且该布局还内建了对面板分隔栏的支持。下面是边框布局的一个简单的示例。
为了进行说明，将在代码5-19中创建一个包含全部border布局部分的示例，这个示例可以形象的展示border布局的结构。
代码5-19：BorderLayout（边框布局）示例

运行代码5-19会得到如下页面效果，从图中可以看到整个页面分为5个部分，这里重点是对region配置项的使用，它决定了子面板在border布局的显示，效果如图5-25所示。