1. #1
    Sencha User dobie_'s Avatar
    Join Date
    Sep 2011
    Location
    Seattle, WA
    Posts
    47
    Vote Rating
    0
    dobie_ is on a distinguished road

      0  

    Default cardSwitchAnimation on Ext.tab.Panel

    cardSwitchAnimation on Ext.tab.Panel


    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..!

  2. #2
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,395
    Vote Rating
    23
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Hi.
    In Touch 2 you can set the wanted animation directly inside the layout object.
    For istance:

    Code:
    layout: {
        type: 'card',
        animation: {
            type: 'slide',
            direction: 'left'
        }
    }
    Hope this helps.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    Owner at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    https://github.com/AndreaCammarata/TUX


  3. #3
    Sencha User dobie_'s Avatar
    Join Date
    Sep 2011
    Location
    Seattle, WA
    Posts
    47
    Vote Rating
    0
    dobie_ is on a distinguished road

      0  

    Default


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

  4. #4
    Touch Premium Member lylepratt's Avatar
    Join Date
    Dec 2010
    Location
    Austin, Texas
    Posts
    159
    Vote Rating
    0
    lylepratt is on a distinguished road

      0  

    Default


    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.
    Twitter: lylepratt

  5. #5
    Ext Premium Member
    Join Date
    Sep 2009
    Posts
    48
    Vote Rating
    1
    yoh.suzuki is on a distinguished road

      0  

    Default


    I would also like to know the answer to this. I can't turn off animation using setAnimation. - y

  6. #6
    Sencha User
    Join Date
    Nov 2010
    Posts
    1
    Vote Rating
    0
    starak is on a distinguished road

      0  

    Default I found a workaround

    I found a workaround


    Andrea's code gave me an idé for a workaround.

    If you add duration:0 like this:

    Code:
    layout: {
        animation: {
            duration:0
        }
    }

  7. #7
    Ext Premium Member
    Join Date
    Sep 2009
    Posts
    48
    Vote Rating
    1
    yoh.suzuki is on a distinguished road

      0  

    Default


    That works! Thank you for the workaround! - y

  8. #8
    Sencha User
    Join Date
    Sep 2011
    Posts
    118
    Vote Rating
    5
    subimage is on a distinguished road

      0  

    Default


    Quote Originally Posted by starak View Post
    Andrea's code gave me an idé for a workaround.

    If you add duration:0 like this:

    Code:
    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:

    Code:
    layout: { animation: false }

  9. #9
    Sencha Premium Member
    Join Date
    Apr 2013
    Location
    Oslo, Norway
    Posts
    1
    Vote Rating
    0
    mortenprom is on a distinguished road

      0  

    Default Add animation: false to config in Ext.tab.Panel

    Add animation: false to config in Ext.tab.Panel


    Adding animation:false to the Ext.tab.Panel layout config will remove the animation when switching between items.

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