学习EXT第八天:EXT的布局（Layout）Part 1
教程：EXT的布局（Layout）Part 1
本文是区域管理器（region manager）的教程的第一篇，为您介绍如何创建区域，如何增加版面到这些区域。
Author:Dave Fenwick
Published: May 01, 2007
Translater: Frank Cheung
Ext的layout布局对于建立WEB程序尤为有用。关于布局引擎（layout engine），区域管理器（region manager）的教程将分为几部分，本文是第一篇，为您介绍如何创建区域，如何增加版面到这些区域。
布局引擎(layout engine)这一功能早已在EXT前个ALPHA实现了。 Jack Slocum对于怎样环绕某一区域，给与指定区域管理的策略，和建立界面的问题，在他的第一、第二篇关于跨浏览器的WEB2.0布局功能的博客中，进行过讨论。定义一个DOM元素的边界（edge），使之一个布局的边框（border）－－这种做法使得创建“加厚型(thick－like)”客户端UI的开发更进一大步。
布局管理器(layout manager)负责管理这些区域。布局管理的主要的用户组件是BorderLayout类。该类为EXT开发富界面的程序提供了一个切入点。Layout的含意是划分好一些预定的区域。可用的区域分别有south, east, west, north,和center。每一个BorderLayout对象都提供这些区域但只有center要求必须使用的。如果你在单独一个区域中包含多个面板，你可通过NestedLayoutPanel 类套嵌到BorderLayout 实例中。
注意事项：本教程的每个文件都是.html和.js格式的。教程每一步都有演示,你也可以下载这些文件在编辑器（zip格式提供在这里）中看看发生什么事。
面板（Pane）是区域管理（region management）的另外一个组件。面板提供了这么一个地方，可为您的EXT器件（widget）、加载的HTML,嵌入的IFrames、或者是你日常在HTML页面上摆放的随便一样东西。NestedLayoutPanel也是一个面板，只不过用于链接多个BorderLayout的区域，其它的面板包括内容面板 ContentPanel,GRID面板 GridPanel,和树状面板 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 = 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中。
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然后便可直接引用。
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的滚动条并放到中间的页面。.
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文档。
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区域。
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;
}教程的第二部分我们将会接触layout manager的一些高级细节内容，包括内嵌layouts，可编程的展开、收缩区域，创建tab layout和其它一些创建EXTellent程序的有效方法。
