Results 1 to 5 of 5

Thread: scrollTo animation

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

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User tf.alves's Avatar
    Join Date
    Feb 2010
    Location
    Portugal
    Posts
    54
    Answers
    3
    Vote Rating
    0
      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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #5
    Sencha User tf.alves's Avatar
    Join Date
    Feb 2010
    Location
    Portugal
    Posts
    54
    Answers
    3
    Vote Rating
    0
      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!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •