Dynamically resizing BorderLayout areas to fit changed contents [Archive]

RLivsey

14 Jun 2007, 2:01 AM

I've seen this come up a few times, such as this thread (http://extjs.com/forum/showthread.php?t=6983&highlight=resize), but can't find any solutions which work.

I have a reasonably complex layout, but for the purposes of explanation I'll boil it down to having a north panel and a centre panel. The north panel is set to autosize when the layout loads, and this all works fine.

However, in the north panel I have a link which expands a hidden div to expose some extra options/information. When this div is shown, I would like for the layout to resize the north panel to fit this in but can't figure out a way to do this.

Thanks in advance.

matjaz

14 Jun 2007, 3:02 AM

Take a look at Ext.BorderLayout.layout()

RLivsey

14 Jun 2007, 4:09 AM

Hi, thanks for the help.

I've tried calling layout() on the border layout after showing the element, but this doesn't seem to do anything.

Here's an example of what I'm doing at the moment:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Resizing</title>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type' />

<script src="javascript/prototype/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous/scriptaculous.js" type="text/javascript"></script>
<script src="javascript/scriptaculous/effects.js" type="text/javascript"></script>
<script src="javascript/extjs/adapter/prototype/ext-prototype-adapter.js" type="text/javascript"></script>
<script src="javascript/extjs/ext-all.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="javascript/extjs/resources/css/ext-all.css" />

<script type="text/javascript">
var layout;
Example = function()
{
return {
init : function(){
layout = new Ext.BorderLayout(document.body, {
north: {
split:false
},
center: {
autoScroll: true
}
});

layout.beginUpdate();
layout.add('north', new Ext.ContentPanel('header', {fitToFrame:true}));
layout.add('center', new Ext.ContentPanel('contents'));
layout.endUpdate();
}
}
}();

Ext.EventManager.onDocumentReady(Example.init, Example, true);

function show_extra()
{
$('extra').show();
$('toggle_show').hide();
$('toggle_hide').show();
layout.layout();
}

function hide_extra()
{
$('extra').hide();
$('toggle_show').show();
$('toggle_hide').hide();
layout.layout();
}
</script>

</head>
<body class="channels_section">
<div id="header">
<p>HEADER</p>
<div id="extra" style="display: none">
<p>
Some extra content
</p>
</div>
<p>
After extra, notice this gets shifted down but the layout doesn't resize
</p>
<p>Some</p>
<p>More</p>
<p>Text</p>
</div>
<div id="contents">
<p>CONTENTS</p>
<p>
<a href="#" onclick="show_extra()" id="toggle_show">show extra in header</a>
<a href="#" onclick="hide_extra()" id="toggle_hide" style="display: none">hide extra in header</a>
</p>
</div>
</body>
</html>

RLivsey

14 Jun 2007, 9:41 AM

Been playing with no success so far :o(

Any more ideas anyone?

tryanDLS

14 Jun 2007, 11:19 AM

I don't think hiding a div in a panel is going to affect the panel or region's height. You probably have to call resizeTo on the north region.

RLivsey

18 Jun 2007, 3:20 AM

Is there an easy way to get the height of the contents of a panel? Not the height of the panel itself, but the contents within it.

IE this obviously doesn't work, because we're getting the height of the panel and that never changes even when the contents change as it's got an explicit height and overflow auto.

var north = layout.getRegion("north");
var new_size = north.getEl().getHeight();
north.resizeTo(new_size);

So what I'm looking to do is find out the right value for new_size and resize to that in a nice clean way.

Thanks in advance.

RLivsey

18 Jun 2007, 3:27 AM

A quick reply to myself...

I'm doing this now, which works, but still wondering if there's a better way that anyone knows of:

var panel = layout.getRegion("north");
var element = panel.activePanel.el.dom;
var old_height = element.getHeight();

element.style.height = '';
var new_height = element.getHeight();
element.style.height = old_height;

panel.resizeTo(new_height);