Numbered List: Take Two

I had posted yesterday how I had managed to use the listData property to add numbers to the list item renderer. However this technique broke when the List actually extended beyond viewable area and became scrollable. I have the updated the example to reflect the fix but here is what I learned during the entire process.

1) The list draws out as many itemRenderers as can be rendered if the dataProviders length is more than the numbers that can be drawn on the list without scolling.
2) List item sets the data value of the item renderer.
3) If the renderer extends IDropInListItemRenderer interface, the list sets the listData value on the renderer. The listData gives some more info to the renderer such as what its row index is,etc.
4)When the user scrolls the list, the labels are rewritten on the same renderers without actually drawing new renderers.

To actually implement the numbering, I ended up using the renderer’s owner property to get a reference on the List and then using the itemRendererToIndex method on the List passing it itself as the parameter. This now works much better as you can see. Right-click to view source :).

Numbered List: Take Two

4 thoughts on “Numbered List: Take Two

  1. Thanks a lot πŸ˜‰ It helps me very well. I use the latest (and first official) release of Flex 3, and it works fine. But I found a strange bug when using a tileList covering the whole app (100% width and height), and when switching from fullScreen to normal mode, all the numbers are good except two items (it renders something like : 17 – 18 – 17 – 20 – 21 – 22), whatever the data provider.

    I think it’s a bug from Flex. But it could be fixed by calling yourTileList.invalidateList() when entering fullScreen mode (there’s a small blink on the renderer but it works).


  2. oliver says:

    thanks for that posting – I tried several ways to get the itemrenderertoindex property within a tileList. this was the only way that worked!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s