FileSystemTree itemRenderer - actionscript-3

Question

I've been trying to do a couple of things and I couldn't.
I've been trying to skin a mx:FileSystemTree, to show de data horizontally, I think it's almost impossible, anyone has an idea how to make it?
The second thing I'm trying is to add an itemRenderer to the FileSystemTree wanting to add a pair of buttons(add and delete, which I already had working). Everything I tried so far is giving the same error:
TypeError: Error #1034: Type Coercion failed: cannot convert SKins::FileSystemItemRenderer#971c479 to mx.controls.listClasses.IListItemRenderer.
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="750" height="500">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:VGroup width="607" height="134">
<s:HGroup width="607" height="68">
<s:Button label="Button"/>
<s:Button label="Button"/>
</s:HGroup>
<s:TextInput width="600"/>
</s:VGroup>
<mx:HDividedBox>
<mx:FileSystemTree id="tree" width="615" height="480" allowMultipleSelection="true"
borderVisible="false" defaultLeafIcon="#Embed('../assets/folder.png')"
directory="{new File(raiz)}" dragEnabled="true" dropEnabled="true"
folderClosedIcon="#Embed('../assets/folder.png')"
folderOpenIcon="#Embed('../assets/openFolder.png')" fontSize="45"
fontStyle="normal" fontWeight="normal" iconFunction="selectIcon"
itemRenderer="SKins.FileSystemItemRenderer" showIcons="true"
textAlign="left" textDecoration="none" verticalAlign="middle"/>
</mx:HDividedBox>
</s:WindowedApplication>
That's the code which is going to show the tree.
<?xml version="1.0" encoding="utf-8"?>
<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="true">
<s:Label text="{data}"/>
</s:ItemRenderer>
I have tried with a simple renderer receiving the error #1034.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/08/creating-an-alternating-item-renderer-in-a-spark-list-control-in-flex-4/ -->
<s:MXTreeItemRenderer name="IListItemRenderer"
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:HGroup id="hGr" left="4" right="4" top="4" bottom="4">
<s:RichText id="lbl" text="({itemIndex}) {data.label}" width="100%" />
<mx:Image id="img" source="{data.img}" toolTip="{data.img}" width="100" height="67" />
</s:HGroup>
</s:MXTreeItemRenderer>
I also have tried another renderer, but with the same results.

Answer 1

Not sure about showing data horizontally, but your 2nd point about itemrenderer is working fine for me. Here is the working code
<?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:HGroup id="hGr" left="4" right="4" top="4" bottom="4">
<s:Rect id="indentationSpacer"
width="{treeListData.indent}" height="22"
alpha="0">
<s:fill>
<s:SolidColor color="0xFFFFFF" />
</s:fill>
</s:Rect>
<s:Group id="disclosureGroup">
<s:BitmapImage source="{treeListData.disclosureIcon}"
width="16" height="16"
visible="{treeListData.hasChildren}" />
</s:Group>
<s:BitmapImage source="{treeListData.icon}"
width="16" height="16"/>
<s:RichText id="lbl" text="{data.nativePath}" toolTip="{data.nativePath}" width="100%" maxDisplayedLines="1" />
<s:Button label="Button"/>
<s:Button label="Button"/>
</s:HGroup>