ExtJs3 中的布局方法是采用 Ext.Container 类中的 Layout 属性去实现的,给 Layout 属性指定一个布局委托类去渲染容器内的子元素的展示。
Ext.layout 包内提供了 14 种不同的布局类,专用布局类 2 种,通用的布局类 12 种:
layout 值 | 布局类 | 说明 |
auto | Ext.layout.ContainerLayout | 所有布局类的基类, layout 的默认值 |
absolute | Ext.layout.AbsoluteLayout | 绝对定位布局 |
accordion | Ext.layout.AccordionLayout | 手风琴布局 |
anchor | Ext.layout.Anchorlayout | 定位式布局 |
border | Ext.layout.BorderLayout | 边界式布局 |
card | Ext.layout.CardLayout | 卡片式布局,标签和向导两种 |
column | Ext.layout.ColumnLayout | 列布局 |
fit | Ext.layout.FitLayout | 填充式布局 |
form | Ext.layout.FormLayout | 表单布局 |
table | Ext.layout.TableLayout | 表格布局 |
hbox | Ext.layout.HboxLayout | 纵向切分布局 |
vbox | Ext.layout.VBoxLayout | 横向切分布局 |
toolbar | Ext.layout.ToolbarLayout | 工具栏布局,仅用于工具栏组件 (Ext.Toolbar) |
menu | Ext.layout.MenuLayout | 菜单布局,仅用于菜单组件 (Ext.menu.Menu) |
Absolute绝对定位布局,通过定位子元素在容器内部的坐标决定子元素的位置
Accordion手风琴布局,收缩式的类似菜单样式,包含多个面板,只显示其中一个
Anchor定位式布局,相对于容器四周的尺寸大小,对其包含在内的元素进行定位
Border边界式布局,一种多面板,面向应用程序UI的布局风格,可支持多个套嵌面板,各区域间自动分隔和扩展/收缩功能。
Card标签式布局,包含的多个面板,里面的每个面板都会填充整个容器,而在同一时候只有一个面板是被显示的。比较常见的应用场合是Wizards(向导式对话框)、Tab标签页这些的实现等等。
Column列式布局,构建多个垂直式结构而准备的布局,当中包含已指定宽度的多个列,列的宽度可以是固定值,也可以是可伸缩的百分比宽度,但里面的内容就是自适应高度了。
Fit填充式布局,单个项布局的基类,这种布局会在容器上自动铺开以填充整个容器。
Form表单式布局,用来创建一个表单的布局,负责渲染和其部件内的子元件。
Table表格式布局,这种布局可以让你把内容轻易地渲染到一个HTML表格。可指定列的总数,而属性:跨行(rowspan)与跨列(colspan)就用于创建表格复杂的布局。
HBox纵向切分布局
VBox横向切分布局