PDA

View Full Version : Animation in panel with collapsed:true and height set



Tom23
25 Sep 2009, 6:58 AM
Ext.onReady(function() {

var panel = new Ext.Panel({
animCollapse: true,
collapsed: true,
collapsible: true,
titleCollapse: true,
title: 'Expand me!',
width: 800,
height: 400,
items: [{
xtype: 'box',
height: 200
}]
});

panel.render(Ext.getBody());

});
In the above example, the initial animation does not work like it should. Looks like the height parameter is not considered by the animating function.

Is this a bug in Ext or am I getting something wrong here?

hendricd
25 Sep 2009, 7:02 AM
Try adding layout:'fit' to the Panel

Condor
25 Sep 2009, 7:09 AM
I don't think layout:'fit' is going to help...

Try adding forceLayout:true to the panel.

Tom23
25 Sep 2009, 7:53 AM
Nope.

After some nerve-racking debugging, I found that the culprit is Ext.Panel's onResize method:


onResize : function(w, h){
if(w !== undefined || h !== undefined){
if(!this.collapsed){
// set body size NOW
} else {
// run onResize again AFTER expansion
}
Looks like a bug to me (?)

Condor
25 Sep 2009, 7:58 AM
That's not a bug, that is intentional (you don't want to resize hidden elements, because their size is 0 if hidden with display:none).

Tom23
25 Sep 2009, 8:06 AM
The structure of the panel body in the above example is something like this:

initial:


<div class="x-panel-bwrap" id="ext-gen5" style="display: none;">
<div class="x-panel-body" id="ext-gen6">
<div id="ext-comp-1002" style="height: 200px;"/>
</div>
</div>after expand:

<div class="x-panel-bwrap" id="ext-gen5" style="display: block; visibility: visible; position: static; left: 0px; top: 0px; z-index: auto;">
<div class="x-panel-body" id="ext-gen6" style="width: 798px; height: 373px;">
<div id="ext-comp-1002" style="height: 200px;"/>
</div>
</div>after expand/collapse:

<div class="x-panel-bwrap" id="ext-gen5" style="display: none; visibility: visible; position: static; left: 0px; top: 0px; z-index: auto;">
<div class="x-panel-body" id="ext-gen6" style="width: 798px; height: 373px;">
<div id="ext-comp-1002" style="height: 200px;"/>
</div>
</div>
You would not want to set the height of div.x-panel-bwrap, but the height of div.x-panel-body.

IIUC, the buggy animation is caused by div.x-panel-body.height not being defined before the first expansion.




Edit: bug report created
http://www.extjs.com/forum/showthread.php?p=390935#post390935