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'
}]
});
5. ColumnLayout
ColumnLayout可以指定面板的宽度，用width指定的是像素，columnWidth指定百分比，必须是0-1之间的数字。也可以两者都用，都用的情况下，百分比是整个页面的宽度减去固定宽度的列剩余的宽度的百分比。
示例用法:
复制代码 代码如下:
var p = new Ext.Panel({
title: 'Column Layout - Mixed',
layout: 'column',
renderTo: document.body,
items: [{
title: 'Column 1',
columnWidth: .3,
html:'<div>Hello World</div>'
}, {
title: 'Column 2',
html:'<div>Hello</div>',
columnWidth: .6
}, {
title: 'Column 3',
columnWidth: .1,
html:'<div>Hello</div><div>Another Line</div>'
}]
});
这个用法是和API文档以及官方例子是一样的，但是这些列的宽度确不能随着浏览器大小的改变而改变，每次总要刷新一下才能重新适应新的浏览器宽度。但是官网的例子上确实可以随着浏览器的拖动内部的面板大小也跟着变化的。很奇怪。如果有朋友知道，请指点迷津下。
布局的用法都差不多，就不再继续写下去了。关键是在实际应用中灵活选用。