PDA

View Full Version : Animations for Ext.Panel aren't working.



Floak
17 Aug 2011, 5:30 AM
Hi there,

i'm new to the sencha touch framework and do really like it. At the moment i'm trying out the animation capabilities in a phonegab/sencha application for Android/Ios. I'm trying to give my starter panel a "pop" animation. This is my code:



new Ext.Application({
icon: 'images/icon.png',
glossOnIcon: true,
launch: OnLaunch
});

var mainPanel = null;

function OnLaunch()
{
...
mainPanel = new Ext.Panel({
fullscreen: true,
showAnimation: {
type: 'pop',
duration: 250
},
layout:{
type: 'hbox',
align: 'stretch',
pack: 'center'
},
items:[{flex: 1}, centerFiller, {flex: 1}],
dockedItems:[toolBar]
});
};

i looked in the Ext.Panel Documentation:


{Object/String/Boolean} showAnimation
* The type of animation you want to use when this component is shown. If you set this
* this hide animation will automatically be the opposite.

It doesn't works. There are no javascript errors or anything.

Do you have any ideas what i'm doing wrong here?

Thanks in Advance,

Floak

tingham
17 Aug 2011, 9:51 AM
If you search the forums for animation (specifically for senchatouch animation support) you'll find it's lacking. The code portions where animation pass-thru would generally be defined are simply not present.

You'll want to use timers and CSS transitions anyway to fully support mobile devices to the optimum quality level for consistency.

The CSS transitions do require a bit more planning, but the result always looks better.

vitorgomes
6 Sep 2011, 6:17 PM
Hi Floak,

Have you tried setting the hidden config of your mainPanel to true?
I was having the same issue and fixed that this way.
Try:


...
fullscreen: true,
hidden: true,
showAnimation: {
type: 'pop',
duration: 250
},
...