ExtJS3.0的各种布局方式

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

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值