actionscript-3apache-flexflex3itemrenderer

Show alternate row colors using itemRenderers inside a List


I have a List with an itemRenderer for displaying some data. Is there anyway i can set different styles or background colors for alternate rows?

My List is as follows :

<mx:List id="myList" alternatingItemColors="[0xffffff, 0xe4e4e4]"
    borderStyle="none"
    width="100%" height="100%" y="25"
    dataProvider="{infoColl}"
    styleName="listRendererStyle"
    itemRenderer="InfoRenderer"/>

Solution

  • Look at the code of spark.skins.spark.DefaultItemRenderer as a pattern. There is the following code to get background color (see in updateDisplayList):

            var alternatingColors:Array = getStyle("alternatingItemColors");
    
            if (alternatingColors && alternatingColors.length > 0)
            {
                // translate these colors into uints
                styleManager.getColorNames(alternatingColors);
    
                backgroundColor = alternatingColors[itemIndex % alternatingColors.length];
            }
    

    But if you're using spark.components.supportClasses.ItemRenderer as a base class for your MXML renderer just set autoDrawBackground property to true and all the backgrounds will be drawn automatically.

    Or read the following documentation how to set alternatingItemColors style of the list to change the values of alternating rows.