布局系统是ExtJS中一个强大的组成部分。它控制着应用程序的每一个组件的尺寸和位置。这个操作手册包含开始使用布局的基础操作。
容器
一个ExtJS应用程序的用户界面由组件构成（更多关于组件的信息见组件指南）。一个容器是一个能够包含其他组件的特殊组件。一个典型的ExtJS应用程序几个层和嵌套的组件构成。
最常使用的容器是Panel。让我们来看看一个容器是怎样允许一个Panel去包含其他组件的。
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 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,
width: '75%'
}
]
});
我们创建了一个Panel，它把它自身渲染到文档body中，并且我们使用了items配置往容器Panel中添加了两个子Panel。
布局
每一个容器用一个布局（Layout）管理着它的子容器的尺寸和位置。这一部分我们将讨论如何去配置容器使用一个定制的布局，还有布局系统是如何保持所有东西都是同步的。
使用布局
在上面的例子中，我们没有定制容器Panel的布局。请注意子Panel是如何一个接在一个的后面放置的，就像DOM结构中一般的块元素那样的。这是因为所有容器的默认布局是Auto Layout。 Auto Layout 不规定子元素的任何定制的位置或尺寸。让我们假设一下，举个例子，我们想要我们的两个子Panel边靠边的放置，每个都占据容器宽度的50%——我们可以简单的通过在容器上提供一个布局配置，使用一个Column Layout。
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 400,
height: 200,
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
}
]
});
ExtJS 配备了整套的布局框，可以适应任何你可以想象得到的布局类型。见 Layout Browser 去获取一个可能点子。
布局系统是如何工作的
一个容器的布局对容器的初始化和容器下面所有子组件的尺寸负责。框架内部调用容器的doLayout方法触发布局去为所有容器的子组件计算正确的尺寸和位置，并且更新DOM。doLayout方法是全递归的，因此任何容器的子元素也都会让它们的doLayout方法得到调用。这样一直持续到达底部的组件层级。在你的应用程序代码中，你一般不用去管doLayout（）的调用，因为框架为代你处理它。
当容器的尺寸被修改，或者一个子组件条目被添加或删除时时，一个重布局会被触发。一般我们可以依赖框架去为我们处理布局的更新，但是有时候我们想去阻止框架自动布局以便我们能够在我们已经准备好以后把所有的操作打包，并且手动的去触发布局。为了要这样做，我们使用在容器上面suspendLayout 标示去阻止它进行布局，而我们执行（添加或者删除条目）的操作，当我们操作完了以后再把 suspendLayout 关掉，并且通过调用容器的 doLayout方法手动去触发一个布局。
var containerPanel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
width: 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();
组件布局
就像一个容器布局定义了一个容器如何去设置它的组件条目的尺寸和位置一样，一个组件也可以有一个如何去设置它的子条目的尺寸和位置的布局（Layout）。组件布局是使用 componentLayout 配置项来配置的。一般的，除非你需要写一个定制的组件，里面所有提供的组件都用他们自己的布局管理器内部控制元素的尺寸和位置，你将不需要使用这个配置。大部分组件使用Auto Layout，但是更多复杂的组件将需要一个定制的组件布局（比如一个拥有头部、尾部和工具条的Panel）。
我的开源中国博客: http://my.oschina.net/xuleo/blog