scrollTo animation

**tf.alves** · 21 Feb 2012 4:44 AM

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!

mitchellsimoens

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.

**mitchellsimoens** · 21 Feb 2012 9:19 AM

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.

**tf.alves** · 21 Feb 2012 9:26 AM

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.

**mitchellsimoens** · 21 Feb 2012 9:28 AM

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.

**tf.alves** · 21 Feb 2012 9:36 AM

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!

scrollTo animation

Thread Tools

Search Thread

Display

Answered: scrollTo animation

Answered: scrollTo animation