1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    10
    Vote Rating
    0
    flamefury is on a distinguished road

      0  

    Default Answered: List Animation on Store Load

    Answered: List Animation on Store Load


    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?

  2. 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);
    
    }

  3. #2
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    71
    Answers
    5
    Vote Rating
    6
    cyee is on a distinguished road

      0  

    Default


    You could listen to the list's refresh event

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    10
    Vote Rating
    0
    flamefury is on a distinguished road

      0  

    Default


    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.

  5. #4
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    392
    Answers
    14
    Vote Rating
    16
    digeridoopoo will become famous soon enough

      0  

    Default Take a look at these...


  6. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    10
    Vote Rating
    0
    flamefury is on a distinguished road

      0  

    Default


    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?

  7. #6
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    71
    Answers
    5
    Vote Rating
    6
    cyee is on a distinguished road

      0  

    Default


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

  8. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    10
    Vote Rating
    0
    flamefury is on a distinguished road

      0  

    Default


    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?

  9. #8
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    71
    Answers
    5
    Vote Rating
    6
    cyee is on a distinguished road

      0  

    Default


    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.

  10. #9
    Sencha User
    Join Date
    Oct 2011
    Posts
    10
    Vote Rating
    0
    flamefury is on a distinguished road

      0  

    Default


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

  11. #10
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    71
    Answers
    5
    Vote Rating
    6
    cyee is on a distinguished road

      0  

    Default


    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.

Thread Participants: 2