PDA

View Full Version : Animated panel resize within a layout



a.bongardt
2 Sep 2010, 11:05 PM
Hi,

I'm currently working on a project for which I need the following:

I have three panels that should be layouted one below the other. If it was possible I would use a BorderLayout with two north regions because the lowest panel is the one that should resize according to the parent container. Currently I'm using two nested BorderLayouts to have the two north regions.

But what I really need is a possibility to resize the top or middle panel with animation. In addition the top panel should only be resizable by code, the one in the middle by the user, too. Currently resizing these elements is only possible when I run a doLayout() on the parent container after setHeight(). Can I do the resize with animations at all? If yes, how can I do that?

Thanks in advance - Andy

Condor
3 Sep 2010, 12:50 AM
Wouldn't a vbox with splitters work better? (there is a user extension to add splitters to box layout).

a.bongardt
3 Sep 2010, 2:26 AM
Thank you. Guess I couldn't see the wood for the trees when I decided to use a nested BorderLayout. :-)

Is it possible to resize these boxes by code with an animation?

Edit:
I just saw that I can't resize the boxes when I use the vbox layout. The same code that I used before doesn't work anymore:


child.setHeight(300);
container.doLayout();Do I have to do the resize another way?

Condor
3 Sep 2010, 2:38 AM
That is strange... that should work!

a.bongardt
3 Sep 2010, 3:48 AM
That's what I thought. Here is a bit more of my code. Maybe I did do a mistake.



MyPanel = Ext.extend(Ext.Panel, {
switchView: function (view) {
var metadataPanel = this.items.get(0);
if (view == 'default') {
metadataPanel.getLayout().setActiveItem(0); // switch to read-only panel
metadataPanel.setHeight(150);
this.doLayout();
}
else if (view == 'edit') {
metadataPanel.getLayout().setActiveItem(1); // switch to editable panel
metadataPanel.setHeight(300);
this.doLayout();
}
},

initComponent: function () {
var config = {
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
items: [
{ height: 150, layout: 'card', ... }, // metadataPanel (top)
{ height: 80, ... }, // documentsPanel (middle)
{ flex: 1, ... } // previewPanel (bottom)
]
},

Ext.apply(this, Ext.apply(this.initialConfig, config));
MyPanel.superclass.initComponent.apply(this, arguments);
}

// ...
}
As I said before, when I used the nested BorderLayout the above code worked. Now using the VBoxLayout, it doesn't work anymore.

Condor
3 Sep 2010, 4:13 AM
Could you try:

metadataPanel.getLayout().setActiveItem(1);
metadataPanel.height = 300;
this.doLayout();

a.bongardt
3 Sep 2010, 4:18 AM
It works!

Thank you very much.

But can I animate the height change?

Condor
3 Sep 2010, 4:28 AM
Yes, you would need to use:

var me = this;
metadataPanel.getResizeEl().setHeight(300, {
duration: 0.5,
easing: 'easeIn',
callback: function(){
metadataPanel.height = 300;
me.doLayout();
}
});
(disclaimer: untested code)

a.bongardt
3 Sep 2010, 4:39 AM
Thanks again for this quick reply. Unfortunately your code doesn't work:


metadataPanel.resizeEl is undefined

Condor
3 Sep 2010, 4:46 AM
Try:

metadataPanel.getResizeEl().setHeight(...);

a.bongardt
3 Sep 2010, 4:59 AM
Hm, this solution doesn't throw an exception, but the behavior is really weird.

First, the content changes (setActiveItem). That's ok.
Then, for 0.5 seconds, nothing happens - no animation. After these 0.5 seconds, the height of the container changes, but not as I would expect it: The panels below the metadataPanel are now lower than before (as expected), but the metadataPanel hasn't changed its size. Instead there is a white rectangle between the metadataPanel and the panels below. (Inspecting the elements with FireBug, I saw that it's only the outermost DIV whose height is changed.)

First I thought this is because the panel's height doesn't change (comparing the value in the callback with the value in setHeight()), so I changed the value in setHeight to 299, but that didn't help either.