Ext JS 布局方式(Layouts)

前言：也就是容器里，子控件的位置。

Ext JS 布局方式

向容器里面添加UI组件的时候，需要定义其布局属性。Layouts会告诉容器如何去安排子组件的位置。 使用布局的前提是，组件本身必须是Ext.container.Container或其子类(只有这些控件才有布局属性)。 所有布局类都继承自Ext.layout.container.Container，看一下继承链：

在设定的布局属性的时候，string或者Json类型都OK：

layout: 'auto'
//or
layout: { 
    type: 'auto'
}

下表列出了Ext JS 布局方式：

布局方式	名字	描述
Absolute	绝对布局	该布局继承自锚定布局。通过x，y配置选项将组件定位到坐标上。
Accordion	手风琴布局	像层叠的手风琴一样管理多个面板(Panel)，默认情况下，多个面板中只有一个处于展开状态。
Anchor	锚定布局	依赖于容器的”锚”自动调整。参见锚定规则。规则包括：百分比式(Percentage,例：anchor:’100% 50%’ )、偏移量式(Offsets,例：anchor:’-50 -100’ )、指定边式(Sides,例：anchor:’right’)以及混合式(Mixed,例：anchor:’-50 75%’)
Auto	自动布局(默认)	写不写没什么区别。
Border	边界布局	按照“东南西北中”的五个区域布局，边界四个区域可以折叠，中间区域必不可少。
Card	卡片布局	像切牌一样，虽然有多个子控件，但是每次只能看到一个。经常用于页面的“向导”制作(也就是常见的“下一步”)。
Fit	自适应布局	容器里面只有一个控件，则容器随着控件大小自动变化。
Form	表单布局	分散对齐的方式，label左对齐，input右对齐，整体撑满容器宽度。
HBox	水平布局	子容器在高度上保持一致。
VBox	垂直布局	子容器在宽度上保持一致。
Table	表格布局	通过rowspan和colspan拼出表格。