1 Reply Latest reply on Aug 10, 2011 8:24 AM by Flex harUI

    Flex tree: variableRowHeight brakes hovered state

    sabbath.shadow

      Hi all!

      I need to display some additional info & controls when the user hovers items in a Tree, and i want them to be shown under the label, so that the row in a tree should expand down. There is a custom item renderer:

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <s:MXTreeItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                     xmlns:s="library://ns.adobe.com/flex/spark"
                                     xmlns:mx="library://ns.adobe.com/flex/mx">
      
            <s:states>
                  <s:State name="normal" />           
                  <s:State name="hovered" />
                  <s:State name="selected" />
            </s:states>
      
            <mx:VBox>
                  <s:HGroup left="0" right="0" top="0" bottom="0" verticalAlign="middle" >
                        <s:Rect id="indentationSpacer" width="{treeListData.indent}" percentHeight="100" alpha="0">
                              <s:fill>
                                   <s:SolidColor color="0xFFFFFF" />
                              </s:fill>
                        </s:Rect>
                        <s:Group id="disclosureGroup">
                              <s:BitmapImage source="{treeListData.disclosureIcon}" visible="{treeListData.hasChildren}" />
                        </s:Group>
                        <s:BitmapImage source="{treeListData.icon}" />
      
                        <mx:VBox height.hovered="75">
                              <s:Label id="labelField" text="{treeListData.label}" paddingTop="2"/>
                              <s:HGroup includeIn="selected, hovered" id="action">
                                   <s:Button label="Edit"/>
                              </s:HGroup>
                        </mx:VBox>
      
                  </s:HGroup>
            </mx:VBox>
      </s:MXTreeItemRenderer>

       

       

       

       

      and a tree, nothing special: <mx:Tree dataSource="{dataList}" itemRenderer ="MyListItemRenderer"/>

       

      if i run that code - when i hover the button is displayed under the hovered row, but other rows are not moved down - so button overlaps with the lower rows.

      if i use variableRowHeight = true for the Tree - hover action is not working - nothing appears when i hover (first problem). If i then select some row - i get the correctly expanded row with the button inside - but i need that in hoverd state.

      However, VBox height.hovered="75" seems to have no effect anyway - am i wrong with usage of that?

       

      Any ideas?

       

      Thanks in advance!