In a previous example, “Alternating row colors in a Flex Tree control using the alternatingItemColors style”, we saw how you can alternate row colors by setting the alternatingItemColors style.
The following example shows how you can alternate item colors based on the item’s depth in a Flex Tree control by setting the depthColors style to an array of colors.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/27/alternating-row-colors-in-a-flex-tree-control-using-the-depthcolors-style/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XMLListCollection id="xmlListColl">
<mx:source>
<mx:XMLList>
<node label="One">
<node label="One.1">
<node label="One.1.1">
<node label="One.1.1.1">
<node label="One.1.1.1.1" />
</node>
</node>
</node>
<node label="One.2" />
<node label="One.3" />
</node>
<node label="Two">
<node label="Two.1" />
<node label="Two.2" />
<node label="Two.3" />
</node>
</mx:XMLList>
</mx:source>
</mx:XMLListCollection>
<mx:Tree id="tree"
dataProvider="{xmlListColl}"
labelField="@label"
depthColors="[#FFFFFF, #EEEEEE, #DDDDDD, #CCCCCC, #BBBBBB, #AAAAAA]"
rowCount="4"
width="300" />
</mx:Application>
View source is enabled in the following example.
{ 1 comment… read it below or add one }
Peter,
As usual, great examples. It’s really helpful when you embed the sample app.
Is there a property/method of the tree to determine the depth of a node?
Is there a depthColors function? Right now I’m doing this sort of thing in a custom itemrenderer with a lot of ugly e4x.
Thanks,
matt.