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

Author: Arpit Mathur

Arpit Mathur is a Principal Engineer at Comcast Labs where he is currently working on a variety of topics including Machine Learning, Affective Computing, and Blockchain applications. Arpit has also worked extensively on Android and iOS applications, Virtual Reality apps as well as with web technologies like JavaScript, HTML and Ruby on Rails. He also spent a couple of years in the User Experience team as a Creative Technologist.

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. 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 )

Facebook photo

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

Connecting to %s

%d bloggers like this: