Flex: List with VBOX-type (smooth) scrolling?

Question

I have a list control that uses a custom itemRenderer and custom itemEditor. The itemRenderer/Editor are textarea controls with at least 3 lines of text each.

The default scrolling nature of a list control is by Item, rather than by some number of pixels, the way a VBOX scrolls.

I want my list control to have more of a word-processor look, where scrolling down will scroll one line of text at a time. Because each list item holds at least 3 lines of text, scrolling down skips all three and positions the next list item at the top of the list control.

Any suggesitons?

I was trying to figure out how to write a custom VBOX that could act like a list, but I'm new to flex -- and I've only been programming for a year. ....Not really sure where to start.

Thanks!

Answer 1

Haven't gotten an answer to my comment, regarding the use of a FLex 4 component in our app.

However, I have deduced that it isn't possible to have a smooth-scrolling List with variable row height, if my requirements are a large list with lots of controls.

Because the list control does not instantiate all of its items at once, it can't determine the needed min and max scroll values based on the total height of all controls. It can only determine these values from the NUMBER of controls it contains. Bummer :-(

Answer 2

Use the Spark List control from Flex 4 (the beta is available). Its "Scroller" interface is much more flexible.

Answer 3

I had a similar issue using an item renderer with text and a thumb. Solved it by making the list render ALL of its items before display, wrapping the list inside a scroller and a group, and turning off scrolling inside the list itself. Make sure you don't specify the list height - let flex do that.

My code: (for some reason I had to enclose the scroller in a group for it to work)

<s:Group width="100%"  height="100%">
  <s:Scroller width="100%" height="100%" horizontalScrollPolicy="off" id="listScroll">
    <s:Group width="100%" height="100%">
      <s:List dataProvider="{arrData}" itemRenderer="renderers.ListingItemRenderer"
        verticalScrollPolicy="off" click="listingSelected()" width="100%" />
    </s:Group>
  </s:Scroller>
</s:Group>