how to Scroll Top a List in Sencha Touch

Let me say I have the view named “tagFilteredView” who contain a simple list of items.
Depending on the tag I want to filter my items by the list may show 3 to hundreds or results. The list is always the same.

Maybe I found a little bug in Sencha Touch UI when you perform these actions:

  1. render a List with a lot of data inside
  2. scroll down the list
  3. update the List’s Store with a small set of data that not require to scroll

In this case you are not able to see data and you are not able to scroll up the list… but there is a simple solution!

Step By Step Explanation:

In this first screenshot you can see a list of tags each with a data count indicator on the left:

This is the data list for the tag “Anatomia”. This tag will show 43 items so the list is scrollable.
I scrolled down the list as shown by the scrollbar indicator:

This is the same List rendered for the “Armi” tag who contains only 3 item. I can’t see these items! And you?
I did a lot of tests and I have noticed that if i manually scroll up the list before to change data all things goes well!

The Simplest Solution:

I think the simplest solution is to scroll up the list or repaint the list (DOM) after List’s Store has been filtered:

List.doComponentLayout(); // this is the trick!

Further Readings

22/01/2012 – Update:

A new reply to the related ST forum thread [link] tell us a new way to solve this problem tested by the user with ST 1.1.1:

if (list.rendered) { list.scroller.scrollTo({x:0, y:0}); }

Thanks to grnadav!

  • Steven

    You’re a hero!

  • Alex

    I had the same issue. There is a simpler solution. I’m assuming you are binding new data to the same list component.

    Add a refresh listener to your list and within the listener call issue the command: this.scroller.scrollTo({x: 0,y: 0});

  • Alex

    The great part is I cannot find ANY documentation on the sencha site for the scrollTo method! Had to dig through forums and pull a lot of hair!

  • admin

    Hi to all, just posted an update from the ST forum!
    Have a nice day!