The following example shows how you can toggle item roll over highlighting in the Tree control in Flex by setting the useRollOver style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/11/toggling-item-roll-over-highlighting-in-the-flex-tree-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:XML id="treeDP">
<root>
<node label="i) One" />
<node label="i) Two" />
<node label="i) Three" />
<node label="i) Four">
<node label="ii) One" />
<node label="ii) Two" />
<node label="ii) Three">
<node label="iii) One" />
<node label="iii) Two" />
</node>
<node label="ii) Four" />
</node>
<node label="i) Five" />
<node label="i) Six" />
</root>
</mx:XML>
<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="checkBox"
label="useRollOver:"
labelPlacement="left"
selected="true" />
</mx:ApplicationControlBar>
<mx:Tree id="tree"
dataProvider="{treeDP}"
labelField="@label"
showRoot="false"
useRollOver="{checkBox.selected}"
width="200" />
</mx:Application>
View source is enabled in the following example.
{ 1 comment… read it below or add one }
Anyone know how you can set this in the TreeItemRenderer to disable rollover on specific depths? I can probe the data to check if the item is at depth 1 and has no children like so …
isRootLabel = (TreeListData(super.listData).depth == 1 && !TreeListData(super.listData).hasChildren);
and then you can use this Boolean in the updateDisplay method to remove the leaf icon, change the label position etc. But setting the useRollOver style to false doesn’t work. It must be an inherited style from the list. I guess you need a way of accessing the list item.