border layout does not resize automatically
I have reduced the problem to the following 'simple' example.
Why doesn't the border panel (myMainPanel) resize itself to its container (containerPanel) when the browser window is resized?
Thanks in advance. Thierry.
PHP Code:<html>
<head>
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="BorderLayout.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ExtStart.css">
<script type="text/javascript">
var myApp;
Ext.onReady ( function()
{
myApp = new MyApp ( Ext.get ( "appContentId" ) );
});
</script>
</head>
<body>
<h1>Testing Border Layout</h1>
<div id="appContentId"></div>
</body>
</html>
PHP Code:MyApp = function ( appElement )
{
var myMainPanel;
init ();
function init ()
{
var westPanel = new Ext.Panel (
{ layout: 'fit'
, region: 'west'
, width: 100
, html: 'This is west'
});
var centerPanel = new Ext.Panel (
{ layout: 'fit'
, region: 'center'
, html: 'This is center'
});
var southPanel = new Ext.Panel (
{ layout: 'fit'
, region: 'south'
, height: 100
, html: 'This is south'
});
myMainPanel = new Ext.Panel (
{ title: 'The App Title'
, layout: 'border'
, items: [ westPanel, centerPanel, southPanel ]
});
var containerPanel = new Ext.Panel (
{ title: 'The container'
, layout: 'fit'
, width: '100%'
, height: 400
, items: [ myMainPanel ]
});
containerPanel.render ( appElement );
}
return {}
}
Originally Posted by tryanDLS
