FLEX 4 s:Scroller, how to bring contained component into view?

Question

Hi,

I have lots of child text inputs within a spark Scroller. How can I make the TextInput with id of "x" come into focus if I have a..z id's, also for the scrollbar to scroll automatically to that child item?

I can use x.setFocus(), but the scrollbar doesn't automatically scroll to that item? why?

<s:Scroller id="scroller" width="100%" height="100">
        <s:Group id="group" width="100%" height="100" id="content">
            <s:TextInput id="a" text="" editable="true" width="100%" height="25" />
            <s:TextInput id="b" text="" editable="true" width="100%" height="25" />
            ....
        </s:Group>
</s:Scroller>

Thanks, Philip

Answer 1

The reason is that setFocus just makes the object active, it doesn't actually move change the scrollPosition of the ScrollBar. With more complex classes like a List, it's more straight forward but Scroller is pretty basic and so it's a bit tougher.

To do what you want you have to get the index of the element inside of your viewport (your group) and then manually set the scrollPosition. For a vertical layout the code would look something like this:

var index:Number = group.getElementIndex(g);
var offset:Number = group.getElementAt(index).height;
scroller.viewport.verticalScrollPosition = index * offset;

Where 'g' is the id of the element you want to move to in your Scroller.

=Ryan [email protected]

Answer 2

couple additional considerations:

1. he items in my data group are not a constant height so if thats the case, a more accurate reference to set the scroller to would be:

   var y:int = group.getElementAt(index).y; scroller.viewport.verticalScrollPosition = y;

2. Make sure your datagroup is not set to use virtualization. Mine was and I got errors as the elements were being added / removed at runtime.