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横向切分布局
文章出处:飞诺网(www.firnow.com):http://dev.firnow.com/course/4_webprogram/jsp/jsp_js/20100721/477625.html