PDA

View Full Version : border layout does not resize automatically



ThierryC
30 Nov 2007, 9:21 AM
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.



<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>




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 {}
}

tryanDLS
30 Nov 2007, 9:49 AM
A panel doesn't listen for resize of the browser. You need to put it a layout (e.g. Viewport).

ThierryC
30 Nov 2007, 11:37 AM
A panel doesn't listen for resize of the browser. You need to put it a layout (e.g. Viewport).

Hum...
This does not match what I'm seen. In the example, the containerPanel is resized automatically but not myMainPanel. So it appears containerPanel listens for browser resize (perhaps indirectly).

The problem seems to be that myMainPanel is not resized by containerPanel???

ThierryC
30 Nov 2007, 11:46 AM
By the way, I just realized I posted this in the wrong forum. I'm using 2.0.

ThierryC
30 Nov 2007, 1:58 PM
adding autoWidth helps a bit (works great with IE but not FF). In FF the panel are sized to whatever is necessary to display the html. In IE the panels are sized to the edge.

I guess I'll investigate handling the initial sizing and resizing myself. It's a pity since one would think the framework would take of this (in a browser independent way).