Ext的layout布局对于建立WEB程序尤为有用。关于布局引擎（layout engine），区域管理器（region manager）的教程将分为几部分，本文是第一篇，为您介绍如何创建区域，如何增加版面到这些区域。
布局引擎(layout engine)这一功能早已在EXT前个ALPHA实现了。 Jack Slocum对于怎样环绕某一区域，给与指定区域管理的策略，和建立界面的问题，在他的第一、第二篇关于跨浏览器的WEB2.0布局功能的博客中，进行过讨论。定义一个DOM元素的边界（edge），使之一个布局的边框（border）－－这种做法使得创建“富界面”客户端UI的开发更进一大步。
布局管理器(layout manager)负责管理这些区域。布局管理的主要的用户组件是BorderLayout类。该类为EXT开发富界面的程序提供了一个切入点。Layout的含意是划分好一些预定的区域。可用的区域分别有south, east, west, north,和center。每一个BorderLayout对象都提供这些区域但只有center要求必须使用的。如果你在单独一个区域中包含多个面板，你可通过NestedLayoutPanel 类套嵌到BorderLayout 实例中。
注意事项：本教程的每个文件都是.html和.js格式的。教程每一步都有演示,你也可以下载这些文件在编辑器（zip格式提供在这里）中看看发生什么事。
面板（Panel）是区域管理（region management）的另外一个组件。面板提供了这么一个地方，可为您的EXT器件（widget）、加载的HTML,嵌入的IFrames、或者是你日常在HTML页面上摆放的随便一样东西。NestedLayoutPanel也是一个面板，只不过用于链接多个BorderLayout的区域，其它的面板包括内容面板 ContentPanel,Grid面板 GridPanel,和Tree面板 TreePanel。
简单的例子
下面的layout包含 north, south, east, west,和center的区域，而且每个区域包含一个ContentPanel，各区域之间使用得了分隔条分割开。
var mainLayout = new Ext.BorderLayout(document.body, { north: { split: true, initialSize: 50 }, south: { split: true, initialSize: 50 }, east: { split: true, initialSize: 100 }, west: { split: true, initialSize: 100 }, center: { }});这是一个非常基本的layout,只是分配了东南西北中间的区域、分隔条、设置一下初始尺寸，并最迟定义中间区域。本例中， BorderLayout被绑定到"document.body"这个DOM元素，其实BorderLayout还可以绑定到任何一个封闭的DOM元素。定义好BorderLayout之后，我们加入ContentPanel对象（基于本例）。
mainLayout.beginUpdate();mainLayout.add('north', new Ext.ContentPanel('north-div', { fitToFrame: true, closable: false}));mainLayout.add('south', new Ext.ContentPanel('south-div', { fitToFrame: true, closable: false }));mainLayout.add('east', new Ext.ContentPanel('east-div', { fitToFrame: true, closable: false}));mainLayout.add('west', new Ext.ContentPanel('west-div', { fitToFrame: true, closable: false}));mainLayout.add('center', new Ext.ContentPanel('center-div', { fitToFrame: true}));mainLayout.endUpdate();当前的例子是将ContentPanel加入到所有区域中。由调用mainLayout.beginUpdate()开始。beginUpdate ()告诉BorderLayout对象在执行endUpate()方法之前，先不要对加入的对象排版布局。这样的好处是避免了ContentPanel有对象加入时，导致UI的刷新，改进了整体的用户体验。执行beginUpdate()之后，加入五个ContentPanel对象到区域。所有的 ContentPanel对象（除中间的那个外），都设置是可关闭的（closbale）。所有的ContentPanel对象也都设置为自动适配它们的父元素。最后执行endUpdate()渲染layout。
InternetExploer注意事项：BorderLayout所容纳的元素必须有一个SIZE以便正确渲染。典型地你无须为document.body 指明size，因为document.body通常是有size的了（大多数情况，－除非你在浏览器上什么也看不到）。但是如果你将layout连同容器放到现有的web页面上（‘可能是DIV）,那么DIV的size应该先指明以便正确渲染。如下列显示正常：
好，让我们趁热打铁，看看完整的layout是怎样的。假设ext是一子目录叫做ext-1.0，父目录下面的代码。
simple.html:
simple.js:
Simple = function() { return { init : function() { var mainLayout = new Ext.BorderLayout(document.body, { north: { split: true, initialSize: 50 }, south: { split: true, initialSize: 50 }, east: { split: true, initialSize: 100 }, west: { split: true, initialSize: 100 }, center: { } }); mainLayout.beginUpdate(); mainLayout.add('north', new Ext.ContentPanel('north-div', { fitToFrame: true, closable: false })); mainLayout.add('south', new Ext.ContentPanel('south-div', { fitToFrame: true, closable: false })); mainLayout.add('east', new Ext.ContentPanel('east-div', { fitToFrame: true, closable: false })); mainLayout.add('west', new Ext.ContentPanel('west-div', { fitToFrame: true, closable: false })); mainLayout.add('center', new Ext.ContentPanel('center-div', { fitToFrame: true })); mainLayout.endUpdate(); } };}();Ext.EventManager.onDocumentReady(Simple.init, Simple, true);加入内容
上面的例子做的layout,除了可移动分割栏外，功能还不强大。需要加入些内容。有几种的办法加入内容。如果您直接加入内容到DIV中（ContentPanel绑定的那个），ContentPanel对象会对div里面的内容进行渲染。尽管试试！我们会更改html内容加入 center-div中。
simple2.html:
This is some content that will display in a panel when a ContentPanel object is attached to the div. 除此之外，还可以利用ContentPanel对象带有的function加载数据。可用的方法有几种，这里我们使用其中两种：setContent() 与 setUrl()。setContent()允许您直接从JavaScipt程序中插入HTML。setUrl()，允许您从服务端得到数据加入ContentPanel中。
我们原来的例子中，ContentPanel对象创建的时候是匿名的（anonymous）。这没问题，但要引用它们，你需要遍历区域管理器所分配的对象以获得引用的对象。这不是最好的办法，所有我的做法是分配一个变量给ContentPanel然后便可直接引用。
simple3.js:
Simple = function() { var northPanel, southPanel, eastPanel, westPanel, centerPanel; return { init : function() { var mainLayout = new Ext.BorderLayout(document.body, { north: { split: true, initialSize: 50 }, south: { split: true, initialSize: 50 }, east: { split: true, initialSize: 100 }, west: { split: true, initialSize: 100 }, center: { } }); mainLayout.beginUpdate(); mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', { fitToFrame: true, closable: false })); mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', { fitToFrame: true, closable: false })); mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', { fitToFrame: true, closable: false })); mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', { fitToFrame: true, closable: false })); mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', { fitToFrame: true })); mainLayout.endUpdate(); northPanel.setContent('This panel will be used for a header'); westPanel.setContent(''); centerPanel.setUrl('index.html'); centerPanel.refresh(); } };}();Ext.EventManager.onDocumentReady(Simple.init, Simple, true);我们现在从现有的页面动态加载内容。但是这里有个问题。若果内容页面积过大而撑破页面的话将没有意义了。我们提供了一些配置属性以解决这类问题。当 fitToFrame为true时，就自动配置autoScroll。内容一旦溢出就会出现滚动条。另外一个涉及InternetExploer的问题, 是中间的内容的样式没有生效，原因是一些浏览器支持动态样式而一些不支持，要较好地解决上述问题，推荐使用Iframe标签。
用IFRAME标签做布局可灵活地处理，我们准备在DOM中直接操纵IFRAME.这里IFRAME成为面板的容器，以填入中间区域的内容
设置一下 IFRAME的滚动条并放到中间的页面。.
simple4.html:
simple4.js:
Simple = function() { var northPanel, southPanel, eastPanel, westPanel, centerPanel; return { init : function() { var mainLayout = new Ext.BorderLayout(document.body, { north: { split: true, initialSize: 50 }, south: { split: true, initialSize: 50 }, east: { split: true, initialSize: 100 }, west: { split: true, initialSize: 100 }, center: { } }); mainLayout.beginUpdate(); mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', { fitToFrame: true, closable: false })); mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', { fitToFrame: true, closable: false })); mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', { fitToFrame: true, closable: false })); mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', { fitToFrame: true, closable: false })); mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', { fitToFrame: true, autoScroll: true, resizeEl: 'center-iframe' })); mainLayout.endUpdate(); northPanel.setContent('This panel will be used for a header'); Ext.get('center-iframe').dom.src = 'index.html'; } };}();Ext.EventManager.onDocumentReady(Simple.init, Simple, true);当前的进展不错。大多数情况滚动条工作起来是很好的，但留意一样的东西， Internet Explorer 7之前的版本，如果文档完整指明DTD的DOCTYPE标签，IE很可能出现垂直滚动条的同时也显示水平滚动条。这个IE布局的一个BUG。
现在这是个基本的LAYOUT和几个ContentPanel对象。接着我们加入一条工具栏（toolbar）到中间的ContentPanel对象。创建过程非常简单。由于主题的关系，我并不准备在这里详细介绍如何创建toolbat。这是简单的创建toolbar的过程：
var simpleToolbar = new Ext.Toolbar('simple-tb');simpleToolbar.addButton({ text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom'});simpleToolbar.addButton({ text: 'Scroll Top', cls: 'x-btn-text-icon scroll-bottom'});要加入toolbar,需要先加入HTML的容器，我们需要加入一些代码以创建toolbar，然后绑定到中间的区域。toolbar有两个按钮： Scroll Bottom和Scroll Top。这些按钮会滚动IFRAME内容到底部或是顶部。为了尽可能兼容多浏览器，我们的加入一个function来控制IFRAME文档。
simple5.html:
simple5.js:
function getIframeDocument(el) { var oIframe = Ext.get('center-iframe').dom; var oDoc = oIframe.contentWindow || oIframe.contentDocument; if(oDoc.document) { oDoc = oDoc.document; } return oDoc;}Simple = function() { var northPanel, southPanel, eastPanel, westPanel, centerPanel; return { init : function() { var simpleToolbar = new Ext.Toolbar('center-tb'); simpleToolbar.addButton({ text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom', handler: function(o, e) { var iframeDoc = getIframeDocument('center-iframe'); iframeDoc.body.scrollTop = iframeDoc.body.scrollHeight; } }); simpleToolbar.addButton({ text: 'Scroll Top', cls: 'x-btn-text-icon scroll-top', handler: function(o, e) { var iframeDoc = getIframeDocument('center-iframe'); iframeDoc.body.scrollTop = 0; } }); var mainLayout = new Ext.BorderLayout(document.body, { north: { split: true, initialSize: 50 }, south: { split: true, initialSize: 50 }, east: { split: true, initialSize: 100 }, west: { split: true, initialSize: 100 }, center: { } }); mainLayout.beginUpdate(); mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', { fitToFrame: true, closable: false })); mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', { fitToFrame: true, closable: false })); mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', { fitToFrame: true, closable: false })); mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', { fitToFrame: true, closable: false })); mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', { fitToFrame: true, autoScroll: true, resizeEl: 'center-iframe', toolbar: simpleToolbar })); mainLayout.endUpdate(); northPanel.setContent('This panel will be used for a header'); Ext.get('center-iframe').dom.src = 'index.html'; } };}();Ext.EventManager.onDocumentReady(Simple.init, Simple, true);一个标准的layout已经差不多了。区域可设置标题，这样可以把几个区域区分开来，创建该区域面板的时候指定属性即可。
所有的区域都可以收缩和展开。要使一个区域可收缩，你应在区域配置项中指定collapsible属性。属性collapsedTitle是用于区域收缩之后显示的文字，collapsedTitle属性只用于north和south区域。
simple6.js:
function getIframeDocument(el) { var oIframe = Ext.get('center-iframe').dom; var oDoc = oIframe.contentWindow || oIframe.contentDocument; if(oDoc.document) { oDoc = oDoc.document; } return oDoc;}Simple = function() { var northPanel, southPanel, eastPanel, westPanel, centerPanel; return { init : function() { var simpleToolbar = new Ext.Toolbar('center-tb'); simpleToolbar.addButton({ text: 'Scroll Bottom', cls: 'x-btn-text-icon scroll-bottom', handler: function(o, e) { var iframeDoc = getIframeDocument('center-iframe'); iframeDoc.body.scrollTop = iframeDoc.body.scrollHeight; } }); simpleToolbar.addButton({ text: 'Scroll Top', cls: 'x-btn-text-icon scroll-top', handler: function(o, e) { var iframeDoc = getIframeDocument('center-iframe'); iframeDoc.body.scrollTop = 0; } }); var mainLayout = new Ext.BorderLayout(document.body, { north: { split: true, initialSize: 50 }, south: { split: true, initialSize: 125, titlebar: true, collapsedTitle: 'Status', collapsible: true }, east: { split: true, initialSize: 100 }, west: { split: true, initialSize: 100, titlebar: true, collapsible: true }, center: { titlebar: true} }); mainLayout.beginUpdate(); mainLayout.add('north', northPanel = new Ext.ContentPanel('north-div', { fitToFrame: true, closable: false })); mainLayout.add('south', southPanel = new Ext.ContentPanel('south-div', { fitToFrame: true, closable: false, title: 'Status' })); mainLayout.add('east', eastPanel = new Ext.ContentPanel('east-div', { fitToFrame: true, closable: false })); mainLayout.add('west', westPanel = new Ext.ContentPanel('west-div', { fitToFrame: true, closable: false, title: 'Navigation' })); mainLayout.add('center', centerPanel = new Ext.ContentPanel('center-div', { fitToFrame: true, autoScroll: true, resizeEl: 'center-iframe', toolbar: simpleToolbar, title: 'Content' })); mainLayout.endUpdate(); northPanel.setContent('This panel will be used for a header'); Ext.get('center-iframe').dom.src = 'index.html'; } };}();Ext.EventManager.onDocumentReady(Simple.init, Simple, true);注意我们收藏起west区域时，是没有title的。当前的HTML没有提供对一个元素的90度的旋转。我们只好用一张透明的图片来实现，上面的文字是'Navigation',宽18p,高150p,然后90度旋转。
为了显示图片，我们需要增大EXT原先的widget样式，只须在HTML头样式表中加入下列样式便可得到适合的样式效果。如simple7.html示。
.x-layout-collapsed-west { background-image: url(navigation.gif); background-repeat: no-repeat; background-position: center;}