Scroll to view the selected list item function

[scottd]

How was this issue solved? I'm facing the same problem of needing to scroll a selectfield list. Do you have working code that you can share?

[shweta.saxena09]

How was this issue solved? I'm facing the same problem of needing to scroll a selectfield list. Do you have working code that you can share?

Well I have used same code provided by mitchell

  var pageoffset=0; 
pageoffset=parseInt(80)*parseInt(node.data.index);

list.getScrollable().getScroller().scrollTo(0,pageoffset, true); 
// here 80 is the height of the list item, bcoz I have fixed height list item u can change it to //dynamically 

its working for me.... i don't know its correct way or not.... but i was on deadline that time......so I chose this....

[x33z]

I've tried the code above, and for the life of me can't figure out why

var offset = Ext.get(el).dom.offsetTop;

Is not returning a value. I log at it in the console, and Ext.get(el) has dom, and the offsetTop value is shown in there. But when I run the code above, it always returns 0.

I've attached the output for the following, which, to me, says I have the proper element.

console.log(Ext.get(el));

What dumb thing am I doing?

Thanks!

[mistik1]

I managed to get this working by using the Ext.fly and the el that is return is an HTMLElement not and Ext.Element which is what you need to have .dom.offsetTop

var store = list.getStore(),
    selected = list.getSelection()[0],
    idx = store.indexOf(selected),
    els = list.container.getViewItems(),
    el = Ext.fly(els[idx]),
    offset = el.dom.offsetTop;

list.getScrollable().getScroller().scrollTo(0, offset, true);

[scottd]

Thanks. Where in your code did you apply this approach? In an event handler?

[matthewdfleming]

Hey guys,

I thought I'd post my solution to this problem. The key for me was to look at how the 'List.js' class handled the scrolling with regard to clicking on an index in the 'index bar.' Here's how I was able to get the scrolling to work.

I have a component that has a list within it... and the outer component is a panel that doesn't always show. So I added this to the config for the outer component:

        listeners: {
            show: function (outerComponent) {
                var list = outerComponent.down('list');
                var task = Ext.create('Ext.util.DelayedTask', function () {
                    var store = list.getStore();
                    var selected = list.getSelection()[0];
                    if (selected) {
                        var idx = store.indexOf(selected),
                            scroller = list.getScrollable().getScroller(),
                            containerSize = scroller.getContainerSize().y,
                            size = scroller.getSize().y,
                            maxOffset = size - containerSize,
                            offsetTop = list.getItemMap().map[idx],
                            offset = (offsetTop > maxOffset) ? maxOffset : offsetTop;
                        scroller.stopAnimation();
                        scroller.scrollTo(0, (offset > 0) ? offset : 0, true);
                    }


                });
                task.delay(200);
            }
        }

I couldn't find an event that was 'after show' or 'after render' so the best I could do is schedule something to run. Anyone have a better way to test that something has been shown. I'm a little worried that the delay (in this case 200ms) might be too short, I was hoping to test for some attribute that gets set to true after a component has been displayed.

Btw, the problem with the other solutions (listed in this thread) is that the way the get the offsetTop is wrong in that

list.container.getViewItems()

will only return the elements 'showing'. The component seems to window things by moving items in and out of the 'viewItems' list. So if the view only has 10 items but your list has 20, this method doesn't work. Hence the solution above, where I use getItemMap instead.

Edit: I had to make the timeout greater for my phone.. like 500ms. Still looking for the attribute to test, so I can delay again if I have to..

-Matt

[remolina]

I ran into the same need yesterday and after a little digging through the API, I found the function setScrollToTopOnRefresh() on the list. As you noticed, when you call refresh(), the list goes back to the top. So if you call setScrollToTopOnRefresh(false), it will not go to the top after refresh.

[samaresh2009]

el = els[idx]at this point el is coming undefiend

[scottd]

We just started using version 2.2.0 and have discovered that our list scrolling workaround no longer works . Now we have no method at all to keep our UI from failing to scroll to the selected item.

We used to use this code on a selectfield's list to find the offset of the item that was programmatically selected:

var map = Mob.ref.RoleList.getItemMap();
var offsetTop = map.map[index];

This works in 2.1.1. Now, with 2.2.0, the item map's map property (map.map) returns an empty array. Anybody know what replaces it, if anything?

[Rohit421991]

@shweta.saxena09
Please can you explain me how your problem is solved (set scoll to selected list item).

Thanks.