LIST c вложеностью как у TREE

[stanley]

Есть лист у которого свой itemRenderer

<s:List id="folders" fontSize="14" textAlign="left"
width="100%" height="100%"  
skinClass="spark.skins.spark.ListSkin" 
itemRenderer="folderItem">			
</s:List>

заполняю его с запроса JSON

<mx:ArrayList id="folderList" />

var obj:Object = JSON.decode(e.target.data);
if (obj)
{
  folderList.source =obj.userFolderTree[0].__children[4].accept;
  folders.dataProvider = folderList;
}

собственно сам itemRenderer

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
				xmlns:s="library://ns.adobe.com/flex/spark" 
				xmlns:mx="library://ns.adobe.com/flex/mx" 
				autoDrawBackground="false">
	<s:states>
		<s:State name="normal" />
		<s:State name="hovered" />
		<s:State name="selected" />
	</s:states>	
	<s:Rect id="fill" left="1" right="1" top="1" bottom="1" 
                   radiusX="8" radiusY="8">
		<s:fill>
			<s:SolidColor color="0x444444" alpha="1"
					  color.selected="0x00CCFF" 
                                          color.hovered="0xFFFFFF" 
                                          color.normal="0x444444" /> 
		</s:fill>
	</s:Rect>	
	<s:Label text="{data}" top="1" bottom="1" left="10" right="1"
			 color="0xFFFFFF"
			 color.selected="0xFFFFFF" 
                         color.hovered="0x000000" 
                         color.normal="0xFFFFFF" 
			 textAlign.selected="left" 
                         textAlign.hovered="left" 
                         textAlign.normal="left"  
			 verticalAlign.selected="middle" 
                         verticalAlign.hovered="middle" 
                         verticalAlign.normal="middle"/>	
</s:ItemRenderer>

итого получаю вид

а нужен вид с имитацией дерева - т.е нужны отступы у детей


Не пойму как проверять у элемента уровень вложенности
можно делать какие то операции с {data}
и как потом задавать координатой Х?