PDA

View Full Version : Animation of a panel "dropdown" effect



FlyFoxUK
5 Jul 2010, 3:54 PM
I have a <DIV> element on a page that is just a coloured rectangle, and would like to show a small Ext.Panel when the bar is clicked such that this Panel is revealed by animation a bit like the lowering of a window blind. The Panel needs to reveal itself below the DIV bar, present the data, and then on clicking a "Close" button scroll itself up to the base of the DIV bar again and hide itself.

Very similar to what happens when you click-and-drag a new bar on this page:
http://www.ext-scheduler.com/examples/eventeditor/editor.html

Any ideas how I can achieve a similar type of animation?

Thanks, FF.

Condor
5 Jul 2010, 11:00 PM
Example:

var p = new Ext.Panel({
title: 'Panel',
width: 300,
height: 200,
floating: true,
hidden: true,
renderTo: Ext.getBody(),
tools: [{
id: 'close',
handler: function(e, t, p){
if (p.el.shadow) {
p.el.shadow.hide();
}
p.el.slideOut('t', {
duration: .5,
callback: function(){
p.hide();
}
});
}
}]
});
Ext.get('id-of-div').on({
click: function(e, t){
if (!p.isVisible()) {
p.el.alignTo(t, 'tl-bl');
p.el.slideIn('t', {
duration: .5,
callback: function(){
p.show();
}
});
}
}
});

dbassett74
6 Jul 2010, 1:06 PM
Thanks for the sample code. I'm trying build off this to use it for my need. I have a border layout with a north, center and south region. The north region contains a panel which I would like to animate open.

For some reason, this code only seems to partially work for me. It doesn't animate at all and you can only see the visible panel when you resize the south splitter.

Is there something else I need to call in order for the animation to be visible in a border layout?

bartonjd
6 Jul 2010, 5:23 PM
Thanks for the sample code. I'm trying build off this to use it for my need. I have a border layout with a north, center and south region. The north region contains a panel which I would like to animate open.

For some reason, this code only seems to partially work for me. It doesn't animate at all and you can only see the visible panel when you resize the south splitter.

Is there something else I need to call in order for the animation to be visible in a border layout?

I couldn't find the North or South splitter at the link provided and the code is packed in some encoded format, do you have some code you could post here and let us look at?