ExtJS layout的9种样式详解

一、  absolute 顾名思义，在容器内部，根据指定的坐标定位显示

二、  accordion 这个是最容易记的，手风琴效果 ，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式

三、anchor 这个效果具体还不知道有什么用，就是知道注意一下

1.容器内的组件要么指定宽度，要么在anchor中同时指定高/宽，
2.anchor值通常只能为负值(指非百分比值)，正值没有意义，
3.anchor必须为字符串值

四、Border布局由类Ext.layout.BorderLayout定义，布局名称为border。

                    该布局把容器分成东南西北中五个区域，分别由east，south, west，north, cente来表示，在往容器中添加子元素的时候，我们只需要指定这些子元素所在的位置，Border布局会自动把子元素放到布局指定的位置。

五、card 像安装向导一样，一张一张显示，布局由Ext.layout.CardLayout类定义，名称为card，该布局将会在容器组件中某一时刻使得只显示一个子元素。可以满足安装向导、Tab选项板等应用中面板显示的需求。

六、column列布局由Ext.layout.ColumnLayout类定义，名称为column。列布局把整个容器组件看成一列，然后往里面放入子元素的时候，可以通过在子元素中指定使用columnWidth或width来指定子元素所占的列宽度。columnWidth表示使用百分比的形式指定列宽度，而width则是使用绝对象素的方式指定列宽度，在实际应用中可以混合使用两种方式。看下面的代码：

七、fit 一个子元素将充满整个容器（如果多个子元素则只有一个元素充满整个容器）

八、form 是一种专门用于管理表单中输入字段的布局

九、table 按照普通表格的方法布局子元素，用layoutConfig:{columns:3},//将父容器分成3列

例一：

Js代码  

1. Ext.onReady(function(){     
2.     var panel=new Ext.Panel( {     
3.        renderTo:'hello',     
4.        title:'容器组件',     
5.        layout:'table',            
6.        width:500,     
7.        height:200,     
8.        layoutConfig:{columns:3},//将父容器分成3列     
9.        items:[     
10.         {title:'元素1',html:'ssssssssss',rowspan:2,height:100},     
11.         {title:'元素2',html:'dfffsddsdfsdf',colspan:2},     
12.         {title:'元素3',html:'sdfsdfsdf'},     
13.         {title:'元素4',html:''}     
14.        ]     
15.     });     
16. });