PDA

View Full Version : cardSwitchAnimation on Ext.tab.Panel



dobie_
15 Nov 2011, 6:26 PM
Hello,
The old Ext.TabPanel had a 'cardSwitchAnimation' configuration parameter. How do I disable the switching animation in the new Ext.tab.Panel?


Thanks in advance..!

AndreaCammarata
16 Nov 2011, 10:02 AM
Hi.
In Touch 2 you can set the wanted animation directly inside the layout object.
For istance:



layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left'
}
}


Hope this helps.

dobie_
16 Nov 2011, 5:59 PM
Oh, thanks! I'm trying to disable the switching animation.. and setting animation: false or null throws an error. How should I do this?

lylepratt
19 Nov 2011, 4:06 PM
I am also wondering how to disable the card switch animation on a TabPanel. Setting it to false, null, undefined, etc doesn't work. It seems really odd that it has one by default since no native UI uses an animation when changing tabs.

yoh.suzuki
23 Nov 2011, 3:20 PM
I would also like to know the answer to this. I can't turn off animation using setAnimation. - y

starak
28 Nov 2011, 10:54 AM
Andrea's code gave me an idé for a workaround.

If you add duration:0 like this:


layout: {
animation: {
duration:0
}
}

yoh.suzuki
28 Nov 2011, 2:50 PM
That works! Thank you for the workaround! :) - y

subimage
25 Aug 2012, 1:08 AM
Andrea's code gave me an idé for a workaround.

If you add duration:0 like this:


layout: {
animation: {
duration:0
}
}


This didn't work for me, as I was hooking into the 'show' event of each individual panel - but the following did:



layout: { animation: false }

mortenprom
18 Dec 2013, 3:05 AM
Adding animation:false to the Ext.tab.Panel layout config will remove the animation when switching between items.


Ext.define('yourTabPanel', {
extend: 'Ext.tab.Panel',
...
config: {
...
layout:{
animation: false
},
items: [{
...
},{
...
}]
}
});