1. #11
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    83
    Vote Rating
    1
    scottd is on a distinguished road

      0  

    Default


    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?

  2. #12
    Sencha User
    Join Date
    Sep 2011
    Posts
    78
    Vote Rating
    1
    shweta.saxena09 is on a distinguished road

      0  

    Default


    Quote Originally Posted by scottd View Post
    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
    Code:
      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....

  3. #13
    Sencha Premium Member
    Join Date
    Oct 2010
    Posts
    32
    Vote Rating
    0
    x33z is on a distinguished road

      0  

    Default Ext.get(el).dom.offsetTop not returning value ?

    Ext.get(el).dom.offsetTop not returning value ?


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

    Code:
    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.

    Code:
    console.log(Ext.get(el));
    What dumb thing am I doing?

    Thanks!
    Attached Images

  4. #14
    Sencha Premium Member mistik1's Avatar
    Join Date
    Apr 2008
    Location
    Moneague, St. Ann, Jamaica W.I.
    Posts
    15
    Vote Rating
    1
    mistik1 is on a distinguished road

      0  

    Default


    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

    Code:
    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);

  5. #15
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    83
    Vote Rating
    1
    scottd is on a distinguished road

      0  

    Default


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

  6. #16
    Sencha User
    Join Date
    Apr 2009
    Posts
    13
    Vote Rating
    1
    matthewdfleming is on a distinguished road

      1  

    Default True Solution to problem

    True Solution to problem


    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:

    Code:
            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
    Code:
    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
    Last edited by matthewdfleming; 18 Jan 2013 at 10:01 AM. Reason: account for negative offset

  7. #17
    Sencha User
    Join Date
    Jan 2012
    Posts
    3
    Vote Rating
    0
    remolina is on a distinguished road

      0  

    Default I had the same need

    I had the same need


    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.

  8. #18
    Sencha User
    Join Date
    Jul 2012
    Posts
    15
    Vote Rating
    2
    samaresh2009 is on a distinguished road

      0  

    Default


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

  9. #19
    Sencha Premium Member
    Join Date
    Mar 2012
    Posts
    83
    Vote Rating
    1
    scottd is on a distinguished road

      0  

    Default Touch 2.2.0 breaks getItemMap(), so now we can't scroll

    Touch 2.2.0 breaks getItemMap(), so now we can't scroll


    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?

  10. #20
    Sencha User Rohit421991's Avatar
    Join Date
    May 2013
    Location
    India
    Posts
    5
    Vote Rating
    0
    Rohit421991 is on a distinguished road

      0  

    Default


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

    Thanks.