Here's a little Flex component (I called it ExpandingList) that may come in handy when you want to build a people list in Flex - just like I just did. This List allows each item to be doubleclicked and expanded, revealing more info, in this case on a particular user. Another doubleclick closes the item again. The functionality is achieved by using an itemRenderer.
Many thanks to Tink who helped me along the way by suggesting I use mx:Resize and Mike who gave me some tips on the doubleclicking. Well done team :-)
Many thanks to Tink who helped me along the way by suggesting I use mx:Resize and Mike who gave me some tips on the doubleclicking. Well done team :-)
There is however a bug that I can see. When you expand one item and then scroll up and down in the list quickly the items are mixed up, or shuffled around. At least it seems that way as suddenly the expanded item may be at the bottom instead of the top for example. I think I know that this has to do with the way that List items are recycled by Flex but how can I avoid this happening? Any other improvements I could make?
UPDATE: thanks Mike for submitting one possible fix. Check it here.
we kind of decided against the data as a storage for the expanded state as it interferes with the dataprovider. Worst case: you may override a property of the actual dataprovider.
The second one was my first idea - but list doesn't seem to have a recycleChildren property. Or did I miss this?
thank again from this side of the 'lantic
Tom
I'm blushing :-)
I wouldn't say from FMS to Flex but from FMS without Flex to FMS with Flex. The two make a great team - I'll post some links once this chat app is finished. Itemrenderers rock btw :-)
does the fix posted above not work for you? Do you have any specific questions?
Btw, you should complete your blog post by explaining what the fix is. It confuses lazy people like who don't bother to read comments or source :)
This works fine but only if the elements in the list have a fix height, if you use a variable height the bug appears again...in your case if you have more info about a particular user you have to use a variable height, so the information appear correctly...
I have to create a list that uses itemRenderer and the list elements have a variable height but I can't resolve the scroll bar issues....can anybody help me?:)
thank again from this side of the 'lantic
Oyun
Use a static array in the item renderer. This way you keep
information in the item renderer only without touching any
other component.
// declare the static array
private static var expandedItems:Array = new Array();
// In the setter function of the item renderer where you
// set the data object, set the size quickly and directly.
if( expandedItems.indexOf(data)>-1 ){
// show this item in expand size without an effect
} else {
// show this item in contract size
}
//In the function where you expand and collapse
//the item renderer on double click, play the expand
//or contract effect and remember
//the size in our static array:
private function setRowSize():void{
var arrayPosition:int = expandedItems.indexOf(data);
if( arrayPosition>-1 ){
contract.end();
contract.play();
expandedItems.splice(arrayPosition,1);
} else {
expand.end();
expand.play();
expandedItems.push( data );
}
}
I have managed to find another solution of my own though, but I'm wondering if yours won't simply be a lot cleaner than the other one I'm currently using. Provided this issue can be sorted out, of course.