1. #1
    Sencha User tf.alves's Avatar
    Join Date
    Feb 2010
    Location
    Portugal
    Posts
    54
    Vote Rating
    0
    Answers
    3
    tf.alves is on a distinguished road

      0  

    Default Answered: scrollTo animation

    Answered: scrollTo animation


    Hello,

    I'm having some trouble animating a scroller. I've tried:

    Code:
    var anim = new Ext.Anim({    duration: 1500,
        after:function(){
            console.log("animation ended!");
        }
    });
    
    
    scroller.scrollTo(0,myYpos,anim);
    but nothing happens. It goes straight to the specified position without animating the transition... I've tried with numerous other config options, and it keeps doing the same.

    Please help. Thanks!

  2. Using the list example that comes with beta 3, I added this to the end of the launch method in app.js:

    Code:
    setTimeout(function() {
        var list     = Ext.Viewport.down('list'),
            scroller = list.getScrollable().getScroller();
    
        scroller.scrollTo(0, 300, true);
    }, 2000);
    And that scrolled the list and animated it. So I tried it with a config object like so and it worked:

    Code:
    setTimeout(function() {
        var list     = Ext.Viewport.down('list'),
            scroller = list.getScrollable().getScroller();
    
        scroller.scrollTo(0, 300, {
            duration : 5000
        });
    }, 2000);
    So far so good. Then I noticed you are creating an Ext.Anim instance so I tried it like this:

    Code:
    setTimeout(function() {
        var list     = Ext.Viewport.down('list'),
            scroller = list.getScrollable().getScroller();
    
        scroller.scrollTo(0, 300, new Ext.Anim({
            duration: 1500,
            after:function(){
                console.log("animation ended!");
            }
        }));
    }, 2000);
    And it worked... So I thought. I changed the duration to 5000 and it didn't make a difference and the after method never got called. So I then tested this to see if the after method got called but did not, the duration did get respected:

    Code:
    setTimeout(function() {
        var list     = Ext.Viewport.down('list'),
            scroller = list.getScrollable().getScroller();
    
        scroller.scrollTo(0, 300, {
            duration: 5000,
            after:function(){
                console.log("animation ended!");
            }
        });
    }, 2000);
    So I went to the API docs and it says it only accepts a boolean or config object, not an Ext.Anim instance which explains why new Ext.Anim didn't get respected.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Using the list example that comes with beta 3, I added this to the end of the launch method in app.js:

    Code:
    setTimeout(function() {
        var list     = Ext.Viewport.down('list'),
            scroller = list.getScrollable().getScroller();
    
        scroller.scrollTo(0, 300, true);
    }, 2000);
    And that scrolled the list and animated it. So I tried it with a config object like so and it worked:

    Code:
    setTimeout(function() {
        var list     = Ext.Viewport.down('list'),
            scroller = list.getScrollable().getScroller();
    
        scroller.scrollTo(0, 300, {
            duration : 5000
        });
    }, 2000);
    So far so good. Then I noticed you are creating an Ext.Anim instance so I tried it like this:

    Code:
    setTimeout(function() {
        var list     = Ext.Viewport.down('list'),
            scroller = list.getScrollable().getScroller();
    
        scroller.scrollTo(0, 300, new Ext.Anim({
            duration: 1500,
            after:function(){
                console.log("animation ended!");
            }
        }));
    }, 2000);
    And it worked... So I thought. I changed the duration to 5000 and it didn't make a difference and the after method never got called. So I then tested this to see if the after method got called but did not, the duration did get respected:

    Code:
    setTimeout(function() {
        var list     = Ext.Viewport.down('list'),
            scroller = list.getScrollable().getScroller();
    
        scroller.scrollTo(0, 300, {
            duration: 5000,
            after:function(){
                console.log("animation ended!");
            }
        });
    }, 2000);
    So I went to the API docs and it says it only accepts a boolean or config object, not an Ext.Anim instance which explains why new Ext.Anim didn't get respected.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User tf.alves's Avatar
    Join Date
    Feb 2010
    Location
    Portugal
    Posts
    54
    Vote Rating
    0
    Answers
    3
    tf.alves is on a distinguished road

      0  

    Default


    I'm a bit confused now, you said you used the setTimeout function, and of course it makes perfect sense, but, if the scrollTo is expecting an animation config, shouldn't the same method be responsable for the setTimeout and handle everything else? What I mean is, I was expecting the scrollTo method to have a setTimeout somewhere inside its' implementation so the developer could just send a animation config to it and not worry about the rest.

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,647
    Vote Rating
    899
    Answers
    3575
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    I'm using setTimeout only to create a 2 second buffer from when the launch method is executed just to give me time to notice the duration of the scroll.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User tf.alves's Avatar
    Join Date
    Feb 2010
    Location
    Portugal
    Posts
    54
    Vote Rating
    0
    Answers
    3
    tf.alves is on a distinguished road

      0  

    Default


    Thanks Mitchell, it must be something else I've done wrong, because I've tried passing just true and just the config as you did in your first and second examples, and I got no results.
    I'm going to try again, thanks again for your help!

Thread Participants: 1