Containers 容器
ExtJS应用的UI界面，是由组件(Component)构建起来的，容器(Container)是一个特殊的组件，它可以盛放其他组件，每个典型的ExtJS应用都是数层嵌套的组件组成的。
如图所示：
最常用的容器，就是Panel，让我们见识一下，作为一个容器，Panel是如何盛放其他组件的：
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
400,
height: 300,
title: 'Container Panel',
items: [
{
xtype: 'panel',
title: 'Child Panel 1',
height: 100,
width: '75%'
},
{
xtype: 'panel',
title: 'Child Panel 2',
height: 100,
'75%'
}
]
});
我们仅仅创建了一个Panel，让它渲染到文档主体body中，然后我们使用了items配置，添加了两个子Panel到容器Panel中。
How the layout system works 布局系统如何工作
容器自身的布局属性负责掌控它的子容器的初始尺寸和位置，ExtJS框架内部会调用容器的doLayout方法触发Layout System计算子容器的大小和位置并更新DOM，doLayout方法是递归的，就是说当一个容器执行了doLayout，它的每层下级容器，都会按照层级顺次调用，直到最内层的容器。通常不需要自己调用doLayout方法，框架会负责这件事。
容器改变尺寸的时候会重新布局，有子容器添加删除也会触发容器重新布局，一般只需要依靠框架自身掌控重新布局即可，但是有些情况我们想禁止自动重新布局，当操作都结束之后一次性重新布局（例如循环添加了几十个子容器，每添加一次就重新布局效率较差，全部添加完之后一次从新布局即可），这时候可以利用suspendLayout标志位置为true阻止一些通常会自动触发重新布局的行为，当操作完成之后关闭这个标志位再手动doLayout，例如：
var containerPanel = Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), 400, height: 200, title: 'Container Panel', layout: 'column', suspendLayout: true // Suspend automatic layouts while we do several different things that could trigger a layout on their own }); // Add a couple of child items. We could add these both at the same time by passing an array to add(), // but lets pretend we needed to add them separately for some reason. containerPanel.add({ xtype: 'panel', title: 'Child Panel 1', height: 100, columnWidth: 0.5 }); containerPanel.add({ xtype: 'panel', title: 'Child Panel 2', height: 100, columnWidth: 0.5 }); // Turn the suspendLayout flag off. containerPanel.suspendLayout = false; // Trigger a layout. containerPanel.doLayout();
Fit布局
在Fit布局中，子元素将自动填满整个父容器。注意：在fit布局下，对其子元素设置宽度是无效的。如果在fit布局中放置了多个组件，则只会显示第一个子元素
典型的案例就是当客户要求一个window或panel中放置一个grid组件，grid组件的大小会随着父容器的大小改变而改变。
Border布局
border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在在其items中指定使用region参数为其子元素指定具体位置。
注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。
参数 split:true 可以调整除了center四个区域的大小。
参数 collapsible:true 将激活折叠功能， title必须设置，因为折叠按钮是出现标题部分的。
center 区域是必须使用的，而且center 区域不允许折叠。Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中，当指定布局为border时，没有指定center区域时，会出现报错信息。
accordion布局：
accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态
Accordion
Ext.application({ name: "HelloExt", launch: function () { Ext.create('Ext.panel.Panel', { title: 'Accordion Layout', 300, height: 300, x: 20, y: 20, layout: 'accordion', defaults: { bodyStyle: 'padding:15px' }, layoutConfig: { titleCollapse: false, animate: true, activeOnTop: true }, items: [{ title: 'Panel 1', html: 'Panel content!' }, { title: 'Panel 2', html: 'Panel content!' }, { title: 'Panel 3', html: 'Panel content!' }], renderTo: Ext.getBody() }); } });
Accordion-Ext.onReady()方法
Ext.onReady(function () { Ext.create('Ext.panel.Panel', { title: 'Accordion Layout', 300, height: 300, x: 20, y: 20, renderTo: Ext.getBody(),//！！ layout: 'accordion', defaults: { bodyStye: 'padding:15px' }, layoutConfig: { titleCollapse: false, ainmate: true, activeOnTop: true }, items: [{ title: 'panel 1', html: 'Content 1' }, { title: 'Panel 2', html: 'Content 2' }, { title:'Panel 3', html:'Content 3' }] }); });
Card布局：
这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交
这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。Card布局可以使用layout:'card'来创建。注意：由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。由于只有一个面板处于显示状态，那么在初始时，我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候，我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外，如果面板中显示的是FORM布局，我们在点击下一个面板的时候，处理FORM中提交的元素，通过AJAX将表单中的内容保存到数据库中或者SESSION中。
下面的示例代码展示了一个基本的Card布局，布局中并没有包含form元素，具体情况，还要根据实际情况进行处理：
Anchor布局
将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
anchor布局将使组件固定于父容器的某一个位置，使用anchor布局的子组件尺寸相对于容器的尺寸，即父容器容器的大小发生变化时，使用anchor布局的组件会根据规定的规则重新渲染位置和大小。
AnchorLayout布局没有任何的直接配置选项（继承的除外），然而在使用AnchorLayout布局时，其子组件都有一个anchor属性，用来配置此子组件在父容器中所处的位置。
anchor属性为一组字符串，可以使用百分比或者是-数字来表示。配置字符串使用空格隔开，例如
anchor:'75% 25%'，表示宽度为父容器的75%，高度为父容器的25%
anchor:'-300 -200'，表示组件相对于父容器右边距为300，相对于父容器的底部位200
anchor:'-250 20%'，混合模式，表示组件党对于如容器右边为250，高度为父容器的20%
示例代码：
Absolute布局
Absolute布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用
Absolute布局继承Ext.layout.container.Anchor 布局方式，并增加了X/Y配置选项对子组件进行定位，Absolute布局的目的是为了扩展布局的属性，使得布局更容易使用。
Column布局
Column布局一般被称为列布局，这种布局的目的是为了创建一个多列的格式。其中每列的宽度，可以为其指定一个百分比或者是一个固定的宽度。
Column布局没有直接的配置选项（继承的除外），但Column布局支持一个columnWidth属性，在布局过程中，使用columnWidth指定每个面板的宽度。
注意：使用Column布局布局时，其子面板的所有columnWidth值加起来必须介于0~1之间或者是所占百分比。他们的总和应该是1。
另外，如果任何子面板没有指定columnWidth值，那么它将占满剩余的空间。
Ext.onReady(function () { Ext.create('Ext.panel.Panel', { renderTo: Ext.getBody(), 400, height: 300, title: 'Container Panel', layout:'column', items: [ { xtype: 'panel', title: 'Child Panel 1', height: 100, columnWidth:0.5 }, { xtype: 'panel', title: 'Child Panel 2', height: 100, columnWidth: 0.5 } ] }); });
效果图：
