[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