1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    ezstar is on a distinguished road

      0  

    Default Unanswered: Scroll to bottom of list when updated

    Unanswered: Scroll to bottom of list when updated


    Hello, I am building an application using the dataview list component. When the server sends new data to it, I would like the list to scroll to the newest item, or at least to the bottom. Unfortunately, if I call scrollToEnd on the list's scroller it scrolls to the second to newest entry, not the newest. I am guessing this is because I am loading data into the store and immediately calling scrollToEnd, before the list component has time to refresh, so it is scrolling to the last visible component at the time, not the one that is being added. If this is correct, I should be able to add a listener and call scrollToEnd from it, but neither the updatedata nor refresh listeners seem to work properly or have the behavior I'm looking for. Is there a simple solution scroll to the bottom of a list whenever a new item is added?

    Thanks

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    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


    Try using after order of the refresh using the list.onAfter instead of list.on or the order : 'after' config in the listener. If this is within a controller you won't be able to use the order, this will have to be done in a view but you can fire a custom event in the view using above methods and listen to that event in the controller.
    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.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    ezstar is on a distinguished road

      0  

    Default


    Is there an event I should hook into with the onAfter? the updatedata event doesn't seem to be firing, and I'm not sure which other one would be relevant. I was able to fire a custom event at the end of the function that adds a new record to the store, but it still seemed to be handled before the list was updated.

    I'd still like to find a solution to this, but for now I'm just deferring the scrollToEnd call by 50ms or so and that seems to work OK.

  4. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,620
    Answers
    3452
    Vote Rating
    817
    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


    Code:
    listeners : {
        order : 'after',
        refresh : someFunction
    }
    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.

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    ezstar is on a distinguished road

      0  

    Default


    The refresh event seems to only be firing when the list loads for the first time, and not when anything is added to the list.

    Here's the code I'm using

    Code:
    xtype: 'list',
    fullscreen:false,
    allowDeselect: true,
    useComponents: true,
    scrollToTopOnRefresh: false,
    itemId: 'messageList',
    itemTpl: '{Message}',
    store: {
        fields: ['Message'],
        data: [
        ]
    },
    
    
    listeners: {
        order : 'after',
        refresh : function(){
           console.log('list refresh')
        }
    }
    The messages are just loaded by adding them to the store, am I doing that wrong?

    Code:
    dataview.getStore().add({Message: message})

  6. #6
    Sencha User
    Join Date
    Feb 2014
    Posts
    4
    Vote Rating
    0
    derand is on a distinguished road

      0  

    Default


    I'm new in Sencha.
    Have some problem, after update data in store (and list), I want scroll to bottom list but i can't found event after update the list.
    When i try to scroll list in "addrecords" my store object it scroll to last but one element.
    -----
    Timer works by I think this is dirty.
    Last edited by derand; 9 Feb 2014 at 3:15 PM. Reason: update

  7. #7
    Sencha User
    Join Date
    Apr 2014
    Posts
    3
    Vote Rating
    0
    Tristan559 is on a distinguished road

      0  

    Default Same problem here

    Same problem here


    I have to assume this is a common feature.

    If someone who has handled this with success could post some example code, it would be greatly appreciated.

    The problem:

    Trying to call scrollToEnd on a ListView when new data is added to its store. addrecords event seems to fire too soon, making the ListView scroll to the previous last record in the list, not the new one.

  8. #8
    Sencha User
    Join Date
    Feb 2014
    Posts
    4
    Vote Rating
    0
    derand is on a distinguished road

      0  

    Default


    Quote Originally Posted by Tristan559 View Post
    I have to assume this is a common feature.

    If someone who has handled this with success could post some example code, it would be greatly appreciated.
    I don't found better solution

    Code:
    msgs.on('load', function(store) {
          var scroller = chatView.down('#chatList').getScrollable().getScroller();
          setTimeout(function () { scroller.scrollToEnd(true); }, 200);
    });
    where:
    chatList - list view with "msgs" as store.

  9. #9
    Sencha User
    Join Date
    Apr 2014
    Posts
    3
    Vote Rating
    0
    Tristan559 is on a distinguished road

      0  

    Default Proper Solution

    Proper Solution


    I found the problem. If you call scrollToEnd() on the scroller after getting an addrecords event (or equivalent), the scroller won't scroll down the proper amount. This is due to the scroller not having the new size of its element yet. Its size is calculated via a TaskQueue callback that happens shortly later. There is good news though, you can simply hook into the scroller's refresh event to properly scroll to the end. Here's an example:

    Code:
    Ext.define('MyList', {
        extend: 'Ext.List',
        xtype: 'mylist',
    
    
        initialize: function() {
            this.callParent(arguments);
            var scroller = this.getScrollable().getScroller();
            scroller.on('refresh', this.scrollToBottom, this);
        },
    .
    .
    .
        scrollToBottom: function() {
            var scroller = this.getScrollable().getScroller();
            scroller.scrollToEnd(true);
        }
    });