extjs中的layout有12中布局方式：

extjs中的layout有12中布局方式：auto,vbox,hbox,fit,anchor,absolute,accordion,border,column,table,card,chechboxgroup.
accordion继承于vbox；
hbox,vbox继承于box；
table，column继承于auto；
absolute继承与anchor；

（1）auto:是容器中默认的布局，所有items在垂直方向依次排列

（2）vbox:items在容器中垂直向下布局,每个item要指定width和垂直的高度（height或flex）
属性:align:left(默认值):在容器左侧水平对齐，center（在容器中居中）,stretch,stretchmax
pack:strat(默认值)，center,end
（3）hbox:items在容器中水平布局,每个item要指定宽度（width或flex）和高度height
属性：top(默认值)，middle，stretch，stretchmax

（4）fit：这种布局适用于一个item，这个item将会填充整个容器。同一个容器中如果有多个item，则只有第一个将会显示在容器中

（5）anchor:相对于容器的尺寸，来锚定容器中的items，如果容器有改变，所有瞄定的items将根据瞄的规则自动改变大小
属性：anchor:包含水平方向瞄的值和竖直方向瞄的值。anchor的值的类型：
Percentage:百分比1-100,第一个值表示占用容器的宽度的百分比；第二个值表示高度的百分比;
Offsets:偏移,任何正整数或负整数，第一个值表示从容器右边界开始偏移值；第二个值表示从容器底部开始偏移值;
Mixed:混合值，将几种类型的值混合起来;
Sides:右侧和底部有效的值;

（6）absolute:继承与anchor，可以用x/y来定位
（7）accordion:可折叠样式布局来管理多个panels，但是每次只有一个panel是展开的，这种布局使每个panel具有扩展和收缩功能.
属性：multi，值为true时，可以允许多个items同时展开；

（8）border：多窗格，面向UI布局的风格，支持多种嵌套，各部分可以自动伸缩。每个容器使用border布局时,必须有一个item是region:’center’，其他的items必须要fit。
属性：region:center,west,north,south,east
注：item用region是west或east，应确定一个最初的width。item用region是north或south，应确定一个最初的height
Ext.onReady(function(){
Ext.create(‘Ext.panel.Panel’, {
width: 1000,
height: 600,
title:’Border Layout’,
bodyStyle:{
background: ‘#ffc’,
padding:’5px’
},
layout: ‘border’,
items: [{
title: ‘South Region is resizable’,
region: ‘south’, // position for region
xtype: ‘panel’,
height: 100,
split: true, // enable resizing
margin: ‘0 5 5 5’,
bbar: [
{ xtype: ‘button’, text: ‘Button 1’ },
{ xtype: ‘button’, text: ‘Button 2’ },
{ xtype: ‘button’, text: ‘Button 3’ },
{ xtype: ‘button’, text: ‘Button 4’ }
]
},{
// xtype: ‘panel’ implied by default
title: ‘West Region is collapsible’,
region:’west’,
xtype: ‘panel’,
margin: ‘5 0 0 5’,
width: 200,
collapsible: true, // make collapsible
id: ‘west-region-container’,
layout: ‘fit’
},{
title: ‘Center Region’,
region: ‘center’, // center region is required, no width/height specified
xtype: ‘panel’,
layout: ‘fit’,
margin: ‘5 5 0 0’
}],
renderTo: Ext.getBody()
});

    })

（9）column：多列的结构性布局样式，每列的宽度用flex或百分比指定，支持一个配置：columnWidth（是0到1之间的小数），并且columnWidth是针对剩余的空间来说的，所有items的columnWidth加起来等于1或100%

（10）table：将内容渲染到html table 中；columns,colspan,rowspan在table里面能创建复制的布局。
table布局中(layoutConfig)，支持的有效的配置为columns和tableAttrs。但是加入到table中的item支持的配置有：rowspan,colspan,cellId,cellCls(一个CSS类的名称)。对于tdAttrs和trArrs如何使用，目前还没弄清楚如何使用

（11）card:一个容器中有很多items，每个item都fit容器，但是只有一个item是可见的。可以通过setActiveItem来设定显示的item.
重要方法：getPrev()–获得当前可见的item的前一个item或false;
getNext()–获得当前可见的item的后一个item或false;
next()–设定当前可见的item的后一个item可见;
prev()–设定当前可见的item的前一个item可见;

(12)chechboxgroup:用column来布局checkboxgroup和radiogroup。