View Full Version : Problem collapsing a resized panel in an AnchorLayout

24 Feb 2011, 1:04 PM
Hi all, we're using ExtJS 3.2.0 and I'm having a problem getting the AnchorLayout to redo its layout after a panel contained in it is resized and then collapsed. I was able to reproduce the issue using a slightly modified version of extjs/examples/layout/anchor.html:

<title>Anchor Layout</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css"/>

<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript" src="../../ext-all.js"></script>

<style type="text/css">
html, body {
font: normal 12px verdana;
margin: 0;
padding: 0;
border: 0 none;
overflow: hidden;
height: 100%;
<script type="text/javascript">
// added this panel
var collapsiblePanel = new Ext.Panel({
id: 'collapsiblePanel',
title: 'Collapsible Panel',
frame: true,
collapsible: true,
anchor: '100% 20%', // full width, 20% height
items: [ { html: 'Resizable Panel Content' } ]

Ext.onReady(function() {
var viewport = new Ext.Viewport({
anchorSize: {width:800, height:600},
collapsiblePanel, // added this line
title:'Item 1',
html:'Content 1',
anchor:'right 20%'
title:'Item 2',
html:'Content 2',
anchor:'50% 30%'
title:'Item 3',
html:'Content 3',
anchor:'-100 30%'

/* Added this section.
To demonstrate the issue (this is in ExtJS 3.2.0):
1) Click the collapse arrow on the top panel twice; the layout adjusts as expected.
2) Click (or drag) the resizable edge at the bottom of the top panel.
3) Now click the collapse arrow on the top panel again: the panel still collapses but now the layout does not adjust.
var resizer = new Ext.Resizable(collapsiblePanel.getEl(), {
handles: 's',
minHeight: 30, // arbitrary
pinned: true

// Note: this section may be commented out and the collapse problem still occurs
resizer.on('resize', function(resizePanel, width, height, event) {
var panel = Ext.getCmp(resizePanel.getEl().id); // id is "collapsiblePanel"
// debug: alert("Panel ID = '" + panel.id + "', New height = " + height);

// resize the panel
/* does not work
// TODO: is there a cleaner way to handle this?
panel.hide(); // need hide/show in order for the resized panel to render correctly
panel.setHeight(height - 37); // adjust so the panel size matches the dragged edge
}); // end Ext.onReady
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->

To sum up, I added a basic collapsible panel to the top of the anchor layout. If I collapse/expand the top panel initially, the layout adjusts automatically as expected. However, if I click (or drag) the resizable edge of the top panel and then collapse the top panel, the layout does not adjust anymore. Is this expected behavior?

My second question is if there is a more elegant way to get the panel to re-render itself after it it resized (see the "TODO" comment in the code), but that is not related to the collapse issue.

Thanks in advance for any advice! :)