View Full Version : Nested border region not expanding

17 Jul 2009, 5:39 AM

I have a nested border layout. When I collapse the center-center region (cyan bg), I would like the center-south (magenta bg) to fill the space left behind. How do I get this to work?


<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../../../ext/resources/css/ext-all.css" />
<script type="text/javascript" src="../../../ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../../ext/ext-all.js"></script>

<script type="text/javascript">
/* Path to the blank image must point to a valid location on your server. */
Ext.BLANK_IMAGE_URL = '../../../ext/resources/images/default/s.gif';

/* Main application entry point. */
new Ext.Viewport({
layout: "border",
renderTo: Ext.getBody(),
items: [{
region: "north",
xtype: 'panel',
html: 'North'

region: 'west',
xtype: 'panel',
width: 200,
html: 'West'

region: 'center',
layout: 'border', // Define nested layout region.
border: false,
items: [{
region: 'center',
title: 'My Title',
collapsible: true,
bodyStyle: 'background-color: cyan',
html: 'Center Center Region'
}, {
region: 'south',
split: true,
bodyStyle: 'background-color: magenta',
html: 'Center South Region'

region: 'east',
xtype: 'panel',
width: 200,
html: 'East'
}); // Ext.onReady()