List Animation on Store Load

**flamefury** · 7 Jan 2013 10:08 PM

Hi everyone,

I have a list that shows tweets using the JSON from Twitter's Search API and it refreshes periodically using a delayed task by calling load() on the list's store and then calling refresh() on the list.

However, the new entries simply appear at the top. I'd like to make this appear more smooth, so I'm trying to work an Ext.Anim in order to make then new entries slide in from the top and push the older entries down.

Does anyone know how I can do this?

cyee

Oh, it seems like the data has already been added by the time you get to the refresh event. So, the next thing I'd try is adding your refresh listener as a 'before' listener.

The easy way to do this is to add an initialization method that calls addBeforeListener:

Code:

...

config: {
    refs: {
        myList: '#myList'
    },
    control: {
        myList: {
            initialize: 'initList'
        }
    }
}

...

initList: function() {

    var myList = this.getMyList();
    myList.addBeforeListener('refresh', this.onRefresh, this);

}

**cyee** · 8 Jan 2013 9:02 AM

You could listen to the list's refresh event

**flamefury** · 8 Jan 2013 9:59 AM

Where should I listen to the refresh? And what should I do when refresh is called?

I'm not even sure how the list items are treated when the list is refreshed.

**digeridoopoo** · 8 Jan 2013 10:51 AM

Have you seen these excellent tutorials from Bruno Tavares? They might help:

http://extdesenv.com/tutorials/advan...-sencha-touch/

http://extdesenv.com/tutorials/animate-components-in-a-view/

http://extdesenv.com/tutorials/using...-sencha-touch/

:-)

**flamefury** · 8 Jan 2013 11:10 AM

Those do look helpful in terms of making an animation, but the main problem I'm having is that I don't know how to trigger one. When the list refreshes, how are the list items affected? And how would I make it so on a refresh where new tweets appear that the list items properly animate into new locations?

**cyee** · 8 Jan 2013 11:14 AM

The list's 'refresh' event is triggered by the store when the store refreshes.

**flamefury** · 8 Jan 2013 11:28 AM

Okay, so,

I have a list containing tweets as list items.

I periodically update the store of the list. This will automatically refresh the list, if I interpret your above post correctly. I no longer need to call refresh() on the list.

How are the list items refreshed? Is their data updated in place? Are all the list items destroyed and new ones initialized in their place?

And finally, how can I fit an animation such that when new tweets are found, they are added in with some kind of transition as opposed to appearing in place?

**cyee** · 8 Jan 2013 11:41 AM

Right. When you refresh the store, you don't need to update the list. This is the default behavior. See the suspendEvents() method in Ext.data.Store.

The store knows what dataview is attached to it due to the store config parameter you used when you created the list.

**flamefury** · 8 Jan 2013 11:42 AM

Now, when changes happen to the store, how do I have the list animate those changes in as opposed to just having them appear?

**cyee** · 8 Jan 2013 12:24 PM

Probably use the Ext.Animator that was linked to earlier. I've never used it, but it seems like it will do what you want.

List Animation on Store Load

Thread Tools

Search Thread

Display

Answered: List Animation on Store Load

Answered: List Animation on Store Load

Take a look at these...

Take a look at these...