ExtJS layout的9种样式详解

extjs的容器组件都可以设置它的显示风格，它的有效值有 absolute, accordion, anchor, border, card, column, fit, form and table. 一共9种

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

二、accordion 这个是最容易记的，手风琴效果 ，表示可折叠的布局，也就是说使用该布局的容器组件中的子元素是可折叠的形式上面的代码定义了一个容器组件，指定使用Accordion布局，该容器组件中包含三个子元素，在layoutConfig中指定布局配置参数animate为true，表示在执行展开折叠时是否应用动画效果。点击每一个子元素的头部名称或右边的按钮，则会展开该面板，并收缩其它已经展开的面板执行结果将生成如下图所示的界面

三、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列