ExtJs嵌套布局

不说费话，先看图片：

 

 

再看代码：

Ext.onReady(function() {
var innerCenterPanel = new Ext.Panel({
title : 'innerCenter',
region : 'center'
});
var innerBottomPanel = new Ext.Panel({
title : 'innerBottom',
region : 'south',
height : 100
});
var innerPanel = new Ext.Panel({
title : 'Main Content',
region : 'center',
margins : '5 0 0 0',
layout : 'border',
items : [innerCenterPanel, innerBottomPanel]
});
var northPanel = new Ext.Panel({
title : 'North Panel',
region : 'north',
height : 100,
minSize : 75,
maxSize : 250,
margins : '5 5 0 5'
});
var westPanel = new Ext.Panel({
title : 'West Panel',
region : 'west',
margins : '5 0 0 5',
cmargins : '5 0 0 5',
width : 200,
minSize : 100,
maxSize : 300,
split : true,
collapsible: true
});
var eastPanel = new Ext.Panel({
title : 'East Panel',
region : 'east',
margins : '5 0 0 0',
width : 200,
minSize : 100,
maxSize : 300,
split : true,
collapsible: true
});
var border = new Ext.Panel({
title : 'Border Layout',
renderTo : document.body,
layout : 'border',
width : '100%',
height : 500,
items : [northPanel,westPanel,innerPanel,eastPanel]
});
});