Flex Tree vertical scrolling problem

Question

I am using mx:Tree (in Flex 4), and assigned a customised MXTreeItemRenderer for every items. As the TreeItemRenderer contains a list with tileLayout, which means the height of every row is variable. So I have to set the tree's "variableRowHeight to true. When I was testing the tree, everything went well. But when I was using the vertical scroller, I met some problems:

The scroll bar did not move to the position I want. When I was scrolling the content, the scroll bar sometimes scrolled to a unwanted position (e.g. the head of the tree). When there are more rows, the problem is more obvious.
When I was scrolling the tree, the images were flicking all the time. That means, the images are reloading I guess. any help?

Is there anyone who can help me solve the problems? many thx :)

variableRowHeight is very buggy in flex - hab my own problems over the time :( 2. this is how scrolling on flex works. it discards and reinitialises the cell when they are not visible anymore. so if you're loading images from the web it reloads them from cache. — Philipp Kyeck
Well, my purpose is to create a 2-level list representing all the user's friends and their albums (in tile layout) respectively. So is there any alternative suggestions I can use? Thx — Alex Zhou
don't really know. sorry. but maybe the best way around this, is to use a treelist (or normal list - why tree anyway?!) and just "tease" the first 5-6 albums of the user (not clickable). the user then has to select the friend on the list and gets to all the friend's albums in a second view (tilelist). so you could get rid of the "variableRowHeight" and the list/tree would be more readable ... — Philipp Kyeck
Due to some issues, I cannot change the UI design. :( When the user click on the friend on the list, I have to show all the albums inside the list. I am looking for other solutions, still thank you :) — Alex Zhou

James Fiala James Fiala · Accepted Answer · 2011-07-27T16:10:11

One way that I found helpful was to just wrap the tree in a canvas. I was having the same problem with the tree's scrolling because it would do all sorts of funky things, but when you allow the canvas to handle the scrolling instead of the tree everything works out. I chose this over replacing it with the spark tree just because it was a nice quick fix.

<mx:Canvas height="100%" width="100%" verticalScrollPolicy="on">                                       
     <mx:Tree width="100%" height="100%"                                
     click="click_handler(event);"                                                      
     verticalScrollPolicy="off"                                
     itemRenderer="com.fti.view.itemRenderers.defaultRenderer"
     itemClose="{treeSample.height = treeSample.measureHeightOfItems();}"
     itemOpen="{treeSample.height = treeSample.measureHeightOfItems();}"                                     
     id="treeSample"
 variableRowHeight="true"/> 
</mx:Canvas>

Be sure and include those itemClose and itemOpen properties so the canvas is able to accurately set the height and scroll properly. One warning is that if you're working with larger trees, this can be a bit heavy and impact performance.

Flex Tree vertical scrolling problem

2 Answers