I have a s:List where I've defined my own itemRenderer, and would like to insert a horizontal line separating items, similar to the way the mx:LinkBar works. I don't want to have a line at the top or bottom of the list, so I can't just include an upper or lower border in the itemRenderer. I was hoping the itemRenderer could be made aware of its index in the list, but I don't see how. Is there a way to do this?
A:
" I was hoping the itemRenderer could be made aware of its index in the list, but I don't see how. Is there a way to do this?"
If your itemRenderer implements the IDropInListItemRenderer interface, you can just access the rowIndex property of the listData object.
Robusto
2010-05-21 21:21:24
A:
The cleanest solution I've found to this is to put a gap between the items and let a background Rect (or something) show through between the items. To do this on List you can just reskin it and customize the VerticalLayout to have a gap.
James Ward
2010-05-21 22:27:22
Hi James. Great talk at DevNexus btw. The problem is that I don't want the separator to be the full width of the list. My hacked solution was to add the following above the label in the itemRenderer:<s:VGroup width="100%" horizontalAlign="center" includeInLayout="{!isTop}"><mx:Canvas width="80%" height="1" backgroundColor="gray" /> </s:VGroup> Where isTop is detected as:isTop = this.itemIndex == 0;Does this make sense? Is there a cleaner solution?
simms2k
2010-05-25 00:45:10
That works. With the suggestion I made you could size the background Rect to be the width that you want the separator to be.Also instead of using a heavy Canvas to draw the line it's better to use the FXG primitives (Rect, Line, etc).
James Ward
2010-05-25 06:01:28