PDA

View Full Version : Nested border region not expanding



AgentSmith
17 Jul 2009, 5:39 AM
Hi,

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?

Thanks
AS



<head>
<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. */
Ext.onReady(function(){
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()
</script>
</head>

<body>
</body>
</html>