Sencha Touch: Nested list scrolls to top on Back, how can I disable this?

Question

I have a working nested list. When I navigate back by click the back button, it correctly loads the previous list BUT the default seems to scroll it to the top.

It's annoying because say I click on list item #50 and click back, it should show the list positioned back at the position where I was (at item 50) not be scrolled up at item 1. It forces me to scroll down all the way to item 50 to continue exploring where I was.

So is there a way to cancel the "scroll-to-top-on-back" behavior of the nested list? Any way to hack this in the code appreciated

Answer 1

Yes you could use method scrollToRecord() method for your list on back event in NestedList. Like this

lastActiveList.scrollToRecord(node)

---

Another way

You could set previous scroll position by using getScrollable(). You need to use itemtap and back events on NestedList.

• On itemtap you get get current scroll position and set into your current active list

  list.yPosition = list.getScrollable().getScroller().position.y;
  

• And on back button you can again set the same previous scroll position to your list.

  lastActiveList.getScrollable().getScroller().scrollTo(0, lastActiveList.yPosition);
  

You can check with working FIDDLE

CODE SNIPPET

Ext.application({
    name: 'Sencha',

    launch: function() {

        Ext.define('ListItem', {
            extend: 'Ext.data.Model',
            config: {
                fields: ['text']
            }
        });

        Ext.create('Ext.data.TreeStore', {
            model: 'ListItem',

            storeId: 'listItemStore',

            defaultRootProperty: 'items',
            root: {
                items: items
            }
        });

        Ext.create('Ext.NestedList', {

            fullscreen: true,

            store: 'listItemStore',

            listeners: {

                itemtap: function(tree, list, index, target, record, e, eOpts) {
                    list.yPosition = list.getScrollable().getScroller().position.y;
                },

                back: function(btn, node, lastActiveList) {
                    lastActiveList.getScrollable().getScroller().scrollTo(0, lastActiveList.yPosition);
                }
            }
        });
    }
});