日期:2014-05-16  浏览次数:20333 次

[ExtJS4] 布局
1
介绍
布局,简单来说就是设置元素的大小和位置。

Ext 的布局系统包括组件,布局,容器,容器是一种特殊的组件,可以管理组件的大小和位置。


容器是通过 doLayout 来重新计算布局,并更新 DOM.

2
手工布局是不必要的,框架会为你自动处理。当然为了性能,可以进行手工布局。

ct.suspendLayout = true;
ct.add(...);
ct.suspendLayout = false;
ct.doLayout();

3
布局类型:
组件布局
dock
tip
容器布局
auto
card
fit
hbox
vbox
anchor
table
absolute
column

3 
Ext大部分容器默认使用auto布局,默认不使用auto布局的容器:
FieldSet
anchor

ButtonGroup
table
	
FormPanel | RowEditor
anchor
	
TabPanel
card

Toolbar | Paging
hbox

4
各种布局的使用与配置:
auto
子组件属性:
width
height

column:
如果每个子组件的宽度小10,列布局失效。缩放有问题。 
子组件属性:
columnWidth 百分比

table :
容器属性:
columns 列数
子组件属性:
colspan
rowspan
 
border :
容器属性:
layout.align
子组件属性:
region west l|east r |center |south b|north t
width
height

hbox |vbox
可指定溢出处理,伸缩效果好。
容器属性:
layout.align
子组件属性:
flex

accordion
伸缩

checkboxgroup
通常适合单选,多选组件
容器属性: 
vertical 
columns

fit
伸缩效果好
但只能有一个子组件.

card
卡片布局

anchor 
伸缩效果好
子组件属性:
anchor : "100% 50%" 百分比
anchor : "-20, -20"  偏移(相对右下边)

absolute
子组件属性:
x
y