PDA

View Full Version : Animating Ext.Sheet



KJedi
24 Dec 2011, 9:56 AM
I need the following functionality:
There is a map with custom markers on it. I handle the tap event and need to show the panel in the top part of the map with information about the tapped item.
Initially I used the docked component, but when I hide/how it, ther map jumps as well, because component does not cover the map, it moves it down.
That's correct behavior for docked items, but I need a different one. So I utilized and Ext.Sheet for this. It works like a charm (I only needed to add it to the component where I want it to appear otherwise it appeared in the very top of the page), but I need more now. I want it to slide up/down with animation. Here'w what I use:

Ext.define('CJ.view.search.DetailSheet', {
extend: 'Ext.Sheet',
alias: 'widget.detailSheet',
config: {
height: 143,
enter: 'top',
enterAnimation: {
type: 'slide',
duration: 500
},
exit: 'top',
exitAnimation: {
type: 'slide',
duration: 500
},
stretchX: true,
modal: false,
cls: 'dealDetailSheet'
},
However when I do hide() or show(), there is no animation there. What I am doing wrong?

mitchellsimoens
24 Dec 2011, 10:16 AM
Animations are not complete yet. If you look at the source for Ext.Sheet, you can see quite a lack of source meaning that this class isn't fully baked.

Looking at our latest code internally, it looks like this should be working in our next release.

KJedi
24 Dec 2011, 12:07 PM
Yes, I checked out the code. The Ext.Sheet, parent classes and descendants and could not find how that is animated. That's why I asked here :)

OK, waiting for the Sencha Touch 2 Beta. Any chances to get it before the end of January?