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横向切分布局