Ext3.2 布局——border layout

Ext3.2中有很多布局，最常用的如borderlayout，formlayout，fit，column，table，vbox，hbox。想要一个漂亮而又简洁的界面，则需要对各个布局的细节都十分清楚才可以。比如，如何获取某个布局下的组件。

borderlayout

var myBorderPanel = new Ext.Panel({
renderTo: document.body,
width: 700,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south',     // position for region
height: 100,
split: true,         // enable resizing
minSize: 75,         // defaults to 50

maxSize: 150,
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default

title: 'West Region is collapsible',
region:'west',
margins: '5 0 0 5',
width: 200,
collapsible: true,   // make collapsible
cmargins: '5 5 0 5', // adjust top margin when collapsed
id: 'west-region-container',
layout: 'fit',
unstyled: true
},{
title: 'Center Region',
region: 'center',     // center region is required, no width/height specified
xtype: 'container',
layout: 'fit',
margins: '5 5 0 0'
}]
});

这个是Ext3.2 api上的一个经典的例子。需要说明的有以下几点：

任何使用BorderLayout的容器必须拥有一个region:'center' 的子组件。中部区域的子组件将会总是充满布局中其它区域不使用的剩余区域。
任何拥有west 或者east区域的子组件必须定义width (一个整数值，指定了区域所占的像素数)。
任何拥有north 或者south区域的子组件必须定义height。
BorderLayout的区域 在渲染时确定，然后 它的子组件不能被删除或者添加。 如需在BorderLayout中add/remove组件， 通过把它们包装到一个额外的Container中， 它直接被BorderLayout管理。 如果需要区域可折叠， 直接使用BorderLayout进行管理的Container必须是一个Panel。

特别是第四点，在实际的应用中，我们可能需要添加或移除或更新某个区域内的组件。该区域下的根Container是无法移除的，我们只能移除根Container（这个Container必须是一个Panel）内的元素。这时候，通常根Container的布局‘fit’。fit的意思是填充该区域，也就是根Container会填充着该区域。