Podrias hacerlo utilizando un tree y un itemRender
Nose si algo asi te sirve.
MAIN.MXML
Código Flex :
<?xml version="1.0" encoding="utf-8"?>
<!--Basado en un ejemplo de blog.flexexamples.com-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.treeClasses.TreeItemRenderer;
import mx.events.TreeEvent;
import mx.events.FlexEvent;
import mx.collections.ICollectionView;
import mx.events.ListEvent;
private function tree_itemClick(evt:ListEvent):void {
var item:Object = Tree(evt.currentTarget).selectedItem;
if (tree.dataDescriptor.isBranch(item)) {
tree.expandItem(item, !tree.isItemOpen(item), true);
}
}
private function tree_labelFunc(item:XML):String {
var children:ICollectionView;
var suffix:String = "";
if (tree.dataDescriptor.isBranch(item)) {
children = tree.dataDescriptor.getChildren(item);
suffix = " (" + children.length + ")";
}
return item[tree.labelField] + suffix;
}
protected function tree_updateCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
//trace(event);
}
protected function tree_changeHandler(event:ListEvent):void
{
// TODO Auto-generated method stub
trace(event);
/* tree.height = tree.measureHeightOfItems(0, filas+1); */
//var filas:int = tree.dataProvider.length;
//tree.height = tree.measureHeightOfItems(0, filas+1);
}
protected function tree_itemOpenHandler(event:TreeEvent):void
{
// TODO Auto-generated method stub
trace(event);
if(event.currentTarget is Tree){
var treeComponent:Tree = event.currentTarget as Tree;
var xml:XML = event.item as XML;
var itemRender:TreeItemRenderer = event.itemRenderer as TreeItemRenderer;
//itemRender.height;
var filas:int = xml.length();
treeComponent.height = treeComponent.measureHeightOfItems(0, filas+1);
}
}
protected function tree_addedToStageHandler(event:Event):void
{
// TODO Auto-generated method stub
trace(event);
}
]]>
</mx:Script>
<mx:XML id="dp">
<root>
<folder label="One">
<folder label="One.A">
<item label="One.A.1" />
<item label="One.A.2" />
<item label="One.A.3" />
<item label="One.A.4" />
<item label="One.A.5" />
</folder>
<item label="One.1" />
<item label="One.2" />
</folder>
<folder label="Two">
<item label="Two.1" />
<folder label="Two.A">
<item label="Two.A.1" />
<item label="Two.A.2" />
</folder>
</folder>
</root>
</mx:XML>
<!--Nota: al aumentar la duracion del efecto del tree le aparece scroll y no funciona bien.-->
<mx:Resize id="resizeIt" duration="200"/>
<mx:Tree id="tree"
dataProvider="{dp}"
showRoot="false"
labelField="@label"
labelFunction="tree_labelFunc"
width="300"
addedToStage="tree_addedToStageHandler(event)"
change="tree_changeHandler(event)"
itemOpen="tree_itemOpenHandler(event)"
updateComplete="tree_updateCompleteHandler(event)"
itemRenderer="com.CustomText"
rowCount="6"
itemClick="tree_itemClick(event);"
resizeEffect="{resizeIt}"
/>
</mx:Application>
dentro de carpeta "com":
CustomText.mxml
Código Flex :
<?xml version="1.0" encoding="utf-8"?>
<mx:Text xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="text1_creationCompleteHandler(event)"
added="text1_addedHandler(event)"
removed="text1_removedHandler(event)"
show="text1_showHandler(event)"
hide="text1_hideHandler(event)"
>
<!--Activate and desactivate events works on "flash player"-->
<mx:Script>
<![CDATA[
import mx.events.FlexEvent;
public static var allSize:Number = 0;
public static var allItems:Number = 0;
protected function text1_creationCompleteHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
allItems++;
trace("item created "+allItems+":"+data.@label);
//trace(data);
this.parent.parent.height += height;
allSize += height;
}
/**
* Executed a lot i don't understand very well
* **/
protected function text1_addedHandler(event:Event):void
{
// TODO Auto-generated method stub
//trace(event);
}
protected function text1_removedHandler(event:Event):void
{
trace(event);
}
protected function text1_activateHandler(event:Event):void
{
// TODO Auto-generated method stub
trace(event);
}
protected function text1_deactivateHandler(event:Event):void
{
// TODO Auto-generated method stub
trace(event);
}
protected function text1_showHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
trace("SHOW:"+data.@label+" - "+event);
this.parent.parent.height += height;
}
protected function text1_hideHandler(event:FlexEvent):void
{
// TODO Auto-generated method stub
trace("HIDE:"+data.@label+" - "+event);
this.parent.parent.height -= height;
}
]]>
</mx:Script>
</mx:Text>
Perdon por no borrar el codigo sobrante
Cualquier cosa avisame.
PD: si sabes d una mejor manera de agregar codigo al post avisame
