EXT布局：
1）.border布局
border布局：border布局也称边界布局，他将页面分隔为west,east,south,north,center这五个部分，我们需要在其items中指定使用region参数为其子元素指定具体位置。
注意：north和south部分只能设置高度（height），west和east部分只能设置宽度（width）。north south west east区域变大，center区域就变小了。
参数 split:true 可以调整除了center四个区域的大小。
参数 collapsible:true 将激活折叠功能。
center 区域是必须使用的，Center区域会自动填充其他区域的剩余空间。尤其在Extjs4.0中，当指定布局为border时，如果没有指定center区域时，会出现报错信息。
示例代码：
Ext.onReady(function () {
new Ext.Viewport({ title: \ layout: \ defaults: {
bodyStyle: \ frame: true },
items: [
{ region: \ { region: \ { region: \ { region: \split: true, border: true, collapsible: true,title:'center' },
{ region: \title:\split: true, border: true, collapsible: true, height: 100 },
] }); });
2）.Accordion布局__手风琴布局
accordion布局：accordion布局也称手风琴布局，在accordion布局下，在任何时间里，只有一个面板处于激活状态。其中每个面边都支持展开和折叠。注意：只有Ext.Panels 和所有Ext.panel.Panel 子项，才可以使用accordion布局。
示例代码：
Ext.onReady(function () {
var accordion = Ext.create(\ title: \
layout: \ //设置为手风琴布局 layoutConfig: { animate: true },
width: 250, minWidth: 90,
region: \设置方位 split: true,
collapsible: true, items: [
{ title: \嵌套面板一\嵌套面板一\ { title: \嵌套面板二\嵌套面板二\ { title: \嵌套面板三\嵌套面板三\ { title: \嵌套面板四\嵌套面板四\ ] });
new Ext.Viewport({ title: \
layout: \这里是（border）边界布局 defaults: {
bodyStyle: \ frame: true },
items: [
accordion, //这里是（accordion）手风琴布局
{region: \ { region: \ { region: \split: true, border: true, collapsible: true, title: 'center' },
{ region: \title: \split: true, border: true, collapsible: true, height: 100 } ] }); });
3）.Card布局__类似向导
Card布局：这种布局用来管理多个子组件，并且在任何时刻只能显示一个子组件。这种布局最常用的情况是向导模式，也就是我们所说的分布提交。Card布局可以使用layout:'card'来创建。
注意：由于此布局本身不提供分步导航功能，所以需要用户自己开发该功能。由于只有一个面板处于显示状态，那么在初始时，我们可以使用setActiveItem功能来指定某一个面板的显示。当要显示下一个面板或者上一个面板的时候，我们可以使用getNext()或getPrev()来得到下一个或上一个面板。然后使用setDisabled方法来设置面板的显示。另外，如果面板中显示的是FORM布局，我们在点击下一个面板的时候，处理FORM中提交的元素，通过AJAX将表单中的内容保存到数据库中或者SESSION中。
示例代码：
//Card布局__类似向导 Ext.application({
name: 'HelloExt', launch: function () {
var navigate = function (panel, direction) { var layout = panel.getLayout(); layout[direction]();
Ext.getCmp('move-prev').setDisabled(!layout.getPrev()); Ext.getCmp('move-next').setDisabled(!layout.getNext()); };
Ext.create('Ext.panel.Panel', {
title: 'Card布局示例', width: 300, height: 202, layout: 'card', activeItem: 0, x: 30, y: 60,
bodyStyle: 'padding:15px', defaults: { border: false }, bbar: [{
id: 'move-prev', text: '上一步',
handler: function (btn) {
navigate(btn.up(\ },
disabled: true }, '->', {
id: 'move-next', text: '下一步',
handler: function (btn) {
navigate(btn.up(\ }