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]

					});

		});