Item Renderer as a Custom Compent & Class

Does anyone have an example of how to create a Custom
Component that is not
merely MXML, but also contains a Full AS3 class
(constructors, static
methods, methods, and public properties) implemented in AS3?
I want to be able have advanced behavioral methods associated
with a custom
ItemRenderer.
Dr. YSG

Have you seen the "Creating and Extending Flex 2 Components"
book in the Flex doc set? You can find it here:
http://livedocs.macromedia.com/flex/2/docs/Part3_CreateComps.html
Stephen

Similar Messages

How to make a item renderer have a custom and rounded corners background

Hi,
I'm using custom item renderer for items of list. However,
there is still one thing I haven't made yet. I can't put a
background with a custom color and with rounded corners.
How can I do that?
It seems that all the options I try don't work.
Can someone give me a tip here?
Thanks,
Nuno

"sinosoidal" <[email protected]> wrote in
message
news:gese3u$63n$[email protected]..
> Hi,
>
> I'm using custom item renderer for items of list.
However, there is still
> one
> thing I haven't made yet. I can't put a background with
a custom color and
> with
> rounded corners.
>
> How can I do that?
>
> It seems that all the options I try don't work.
>
> Can someone give me a tip here?
Check out my extended TileList:
http://flexdiary.blogspot.com/2008/08/tilelist-with-stylefunction.html
You might want to swipe the itemRenderer from this example
and modify it:
http://flexdiary.blogspot.com/2008/09/groupingcollection-example-featuring.html

Range component in custom item renderer

Hi,
I am trying to put a spark Range component into the labelItemRenderer for flex mobile. Everytime I add it I get the error: "Skin for (long directory name for my range component) cannot be found". The custom item renderer is an actionscipt class because I read this is the best way to make them for mobile. I'll put the error in the bottom of the post.
If anyone has any idea why this could be happening or if anyone knows a possible way around this it would be extremely helpful. I basicaly just need a list where each item has a label on side and then a progress bar on the other side.
Thanks.
Here is the full error, ill put a star on the line where the addChild method gets called in my item renderer for the range component.
Error: Skin for HoosFit0.TabbedViewNavigatorApplicationSkin5.tabbedNavigator.TabbedViewNavigatorSkin7.con tentGroup.ViewNavigator1.ViewNavigatorSkin12.contentGroup.
FCfacilities139.SkinnableContainerSkin141.contentGroup.Group143.facilityList.ListSkin145.S croller147.ScrollerSkin148.DataGroup146.FCfacilitiesInnerClass0_157.Range154 cannot be found.
          at spark.components.supportClasses::SkinnableComponent/attachSkin()[E:\dev\4.y\frameworks\pr ojects\spark\src\spark\components\supportClasses\SkinnableComponent.as:698]
          at spark.components.supportClasses::SkinnableComponent/validateSkinChange()[E:\dev\4.y\frame works\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:443]
          at spark.components.supportClasses::SkinnableComponent/createChildren()[E:\dev\4.y\framework s\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:406]
          at mx.core::UIComponent/initialize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UI Component.as:7634]
          at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:7495]
          at mx.core::UIComponent/addChild()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UICo mponent.as:7176]
*** at views::itemRenderer2/set data()[/Users/evan/Documents/Adobe Flash Builder 4.6/HoosFit/src/views/itemRenderer2.as:73]
          at spark.components::SkinnableDataContainer/updateRenderer()[E:\dev\4.y\frameworks\projects\ spark\src\spark\components\SkinnableDataContainer.as:606]
          at spark.components.supportClasses::ListBase/updateRenderer()[E:\dev\4.y\frameworks\projects \spark\src\spark\components\supportClasses\ListBase.as:1106]
          at spark.components::DataGroup/setUpItemRenderer()[E:\dev\4.y\frameworks\projects\spark\src\ spark\components\DataGroup.as:1157]
          at spark.components::DataGroup/initializeTypicalItem()[E:\dev\4.y\frameworks\projects\spark\ src\spark\components\DataGroup.as:327]
          at spark.components::DataGroup/ensureTypicalLayoutElement()[E:\dev\4.y\frameworks\projects\s park\src\spark\components\DataGroup.as:384]
          at spark.components::DataGroup/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\comp onents\DataGroup.as:1467]
          at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8506]
          at mx.core::UIComponent/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\ UIComponent.as:8430]
          at mx.managers::LayoutManager/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx \managers\LayoutManager.as:665]
          at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.y\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:816]
          at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.y\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1180]

Hi,
I am trying to put a spark Range component into the labelItemRenderer for flex mobile. Everytime I add it I get the error: "Skin for (long directory name for my range component) cannot be found". The custom item renderer is an actionscipt class because I read this is the best way to make them for mobile. I'll put the error in the bottom of the post.
If anyone has any idea why this could be happening or if anyone knows a possible way around this it would be extremely helpful. I basicaly just need a list where each item has a label on side and then a progress bar on the other side.
Thanks.
Here is the full error, ill put a star on the line where the addChild method gets called in my item renderer for the range component.
Error: Skin for HoosFit0.TabbedViewNavigatorApplicationSkin5.tabbedNavigator.TabbedViewNavigatorSkin7.con tentGroup.ViewNavigator1.ViewNavigatorSkin12.contentGroup.
FCfacilities139.SkinnableContainerSkin141.contentGroup.Group143.facilityList.ListSkin145.S croller147.ScrollerSkin148.DataGroup146.FCfacilitiesInnerClass0_157.Range154 cannot be found.
          at spark.components.supportClasses::SkinnableComponent/attachSkin()[E:\dev\4.y\frameworks\pr ojects\spark\src\spark\components\supportClasses\SkinnableComponent.as:698]
          at spark.components.supportClasses::SkinnableComponent/validateSkinChange()[E:\dev\4.y\frame works\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:443]
          at spark.components.supportClasses::SkinnableComponent/createChildren()[E:\dev\4.y\framework s\projects\spark\src\spark\components\supportClasses\SkinnableComponent.as:406]
          at mx.core::UIComponent/initialize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UI Component.as:7634]
          at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:7495]
          at mx.core::UIComponent/addChild()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UICo mponent.as:7176]
*** at views::itemRenderer2/set data()[/Users/evan/Documents/Adobe Flash Builder 4.6/HoosFit/src/views/itemRenderer2.as:73]
          at spark.components::SkinnableDataContainer/updateRenderer()[E:\dev\4.y\frameworks\projects\ spark\src\spark\components\SkinnableDataContainer.as:606]
          at spark.components.supportClasses::ListBase/updateRenderer()[E:\dev\4.y\frameworks\projects \spark\src\spark\components\supportClasses\ListBase.as:1106]
          at spark.components::DataGroup/setUpItemRenderer()[E:\dev\4.y\frameworks\projects\spark\src\ spark\components\DataGroup.as:1157]
          at spark.components::DataGroup/initializeTypicalItem()[E:\dev\4.y\frameworks\projects\spark\ src\spark\components\DataGroup.as:327]
          at spark.components::DataGroup/ensureTypicalLayoutElement()[E:\dev\4.y\frameworks\projects\s park\src\spark\components\DataGroup.as:384]
          at spark.components::DataGroup/measure()[E:\dev\4.y\frameworks\projects\spark\src\spark\comp onents\DataGroup.as:1467]
          at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::measureSizes()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\UIComponent.as:8506]
          at mx.core::UIComponent/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx\core\ UIComponent.as:8430]
          at mx.managers::LayoutManager/validateSize()[E:\dev\4.y\frameworks\projects\framework\src\mx \managers\LayoutManager.as:665]
          at mx.managers::LayoutManager/doPhasedInstantiation()[E:\dev\4.y\frameworks\projects\framewo rk\src\mx\managers\LayoutManager.as:816]
          at mx.managers::LayoutManager/doPhasedInstantiationCallback()[E:\dev\4.y\frameworks\projects \framework\src\mx\managers\LayoutManager.as:1180]

Data provider problem in custom item renderer

I have a complex, custom item renderer for a list. I add
items that I extracted from an xml to the data provider using the
IList interface. But when displaying the list, the items are all
screwed up. Each rendered item has some parts which are initialized
as different components depending on the values from the xml. This
initialization is called in the item renderer for the
creationComplete event.
The weird thing is that when I output the dataProvider to
check its values, some of the items have internal uids sometimes
and sometimes they don't. If I output the dataProvider right after
I add the items to it, none of them get internal uids. But from the
initialize method, some of them do and some don't.
To make things weirder, sometimes, as I scroll up and down
the list, the dynamic components get all switched up. I'm either
having a problem with internal uids or with the creation policies
for lists. Or it's probably some simpler mistake I have yet to see.
Anyone have any idea where the problem could lie? Any help is
greatly appreciated.

Any successful render must:
1) override the set data property of the component
Further, best practice is to store any data you need in the
override set data(), and call invalidateProperties(). Then do the
actual work in an override commitProperties() function.
The framework is smart about when to call commitProperties
efficiently. set data() gets called much more often.
Tracy

Need for a Datagrid with variableRowHeight="true" and custom Item Renderer to display exact rows

Hi again, developers:
I'm in a search of a datagrid with certain characteristics:
     - variableRowHeight = "true"
     - only one column
     - each row must have a custom item renderer with possibly different heights, and a fixed width
     - the datagrid must show always every item in the data provider with no vertical scroll bars, what means that the datagrid height must have always the exact height sum of all the item renderers it is displaying.
     - and no extra empty rows must appear in the last positions of the datagrid
The last two requirements are something difficult to achieve... for some reason, empty rows appear at the last positions of the datagrid. I post what i've managed to get:
<mx:Script>
     <![CDATA[
     private function resize():void
                if (dg.dataProvider)
                    var h:Number = dg.measureHeightOfItems( -1, dg.dataProvider.length);
                    dg.height = h;
     ]]>
</mx:Script>
<mx:DataGrid id="dg" width="530" horizontalCenter="0" verticalScrollPolicy="off"
        dataProvider="{dp}"
        wordWrap="true" variableRowHeight="true" showHeaders="false" dataChange="resize()" height="{dg.measureHeightOfItems(-1,dg.dataProvider.length)}" click="Alert.show(dg.rowCount.toString());">
        <mx:columns>
            <mx:DataGridColumn headerText="ID" width="50">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:TextArea height="{Math.random()*100}" wordWrap="true" backgroundColor="{Math.random() * 16777216}" paddingTop="0" paddingBottom="0"/>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>

Thanks Harui, but it doesn't help. If the border is set it will help, but the very big problem is the empty rows that appear at the end of the datagrid... I can't find a way of measuring correctly the height of the itemRenderers!
I'll update this thread if I manage to do it.

Custom Style in Item Renderer

Hello guys, again here :)
Well, i have a tile list which renders almost 50-60 items.
I want to give a toolbar, which will be used to customize all
the item renders at the same time. like, change picture border and
it will change the border in all the item renderers
If i am not wrong then the solution is to add a custom style,
and invoke it using sytlemanager.
need your guidance in this regard
thanks in advance :)

Attache some code as inspiration.
HTH.

Help with datagrid custom item renderer

Hi ,
I have a datagrid in which I have a column with a checkbox and a custom Checkbox header renderer and an item renderer.
When I try to disable the grid the checkbox column does not get disabled?
Is there any way I can disable the entire grid along with the checkbox column?
Thanks.

Override updateDisplayList on the renderer and set the .enabled to match
owner.enabled.

Changing values in custom item renderer

I have an xml feed that I am using to populate a List control. The list control has it's itemRenderer property set to CustomListItem which a custom component built by me to display various pieces of data from the xml along with an icon. At certain points I would like to ba able to tell one of the fields in CustomListItem to change from displaying xml.firstData to xml.secondData depending on a radio button selection but I can't find a way to access the properties of CustomListItem from main.mxml (which is where the radio buttons are).
At the moment the values in CustomListItem are set using functions within it to parse the 'data' property.
Sorry if this is a bit of a sketchy explanation of my problem Any suggestions would be great.
Cheers

I hope this code represents your situation, but at least I hope it helps you!
----------------------- main app ----------------------------
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%"
height="100%" creationComplete="dataRequest.send();"
xmlns:comp="*" horizontalAlign="left">
<mx:Script>
    <![CDATA[
      import mx.rpc.events.ResultEvent;
      import MyListItems;
      import mx.collections.XMLListCollection;
      [Bindable] private var xmllist:XMLList;
      [Bindable] private var xlc:XMLListCollection;
      private function resultHandler(evt:ResultEvent):void{
        xmllist = evt.result.item;
        xlc = new XMLListCollection(xmllist.firstData);
      private function changeData(evt:Event):void{
        if(evt.currentTarget.label == "First Data"){
          xlc = new XMLListCollection(xmllist..firstData);
        }else{
          xlc = new XMLListCollection(xmllist.secondData);
    ]]>
</mx:Script>
<mx:HTTPService id="dataRequest" useProxy="false" url="data.xml"
    resultFormat="e4x" result="resultHandler(event)"/>
<mx:RadioButtonGroup id="items"/>
<mx:RadioButton group="{items}" label="First Data" change="changeData(event)"
    selected="true"/>
<mx:RadioButton group="{items}" label="Second Data" change="changeData(event)"/>
<mx:List width="100" height="150" itemRenderer="MyListItems"
    dataProvider="{xlc}"/>
</mx:Application>
----------------------- item renderer --------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Text text="{data}"/>
</mx:HBox>
------------------------------- data.xml ---------------------------
<?xml version="1.0" encoding="utf-8"?>
<mydata>
<item>
    <firstData>apples</firstData>
    <secondData>oranges</secondData>
</item>
<item>
    <firstData>beef</firstData>
    <secondData>chicken</secondData>
</item>
<item>
    <firstData>milk</firstData>
    <secondData>juice</secondData>
</item>
<item>
    <firstData>carrot</firstData>
    <secondData>tomato</secondData>
</item>
</mydata>

How to dispatch custom events from an item renderer used for Datagrid Column

Hi,
I am using an Item Renderer for a Data Grid Column and in that mxml, I am dispatching a custom event with data.
But the main mxml which has the DataGrid is not able to resolve the event. How can I solve this?
Thanks

Hi,
This is the constructor for Event.
public function Event(type:String, bubbles:Boolean = false, cancelable:Boolean = false)
When you created your custom event after extending from Event, for the parent container receives the event, the bubbles property must be set to true.
Please check if you have done so. That should solve the problem. Let me know if it doesn't.
Nishad

Call Icon class in Item Renderer?

I have a class which includes my Icon classes. I want to use it in an item renderer but I couldn't reach it. For your answers, I will be grateful. Here is the related code
<mx:itemRenderer>
     <mx:Component>
          <mx:RadioButton icon="{Icons.ADD_RECORD}" />
     </mx:Component>
</mx:itemRenderer>

Your Icon static Class <yuk> must be imported into the local scope of the itemRenderer.

Using a canvas for item renderer

I have an array collection of objects. The class has a
function getDisplayObject which returns a canvas with all of the
components I need in it. I'd like to use that canvas directly as a
custom renderer for a combo box. How can I set the returned canvas
as the item renderer? I've made custom renderers, but not with a
canvas itself. I think I need to call getDisplayObject inside of
the item renderer for each object, but am not sure how. Thanks.
(Below is what I've tried, but this only adds the first one out of
an array of 5... hmm...)

Hi Usernnnnnn,
I know an applciation that's using such kind of tree.
It's published in the Oracle magazine, may 2006. And is named: Build a menu framework. You can dowload the application:
http://oracle.com/technology/oramag/oracle/06-may/o36apex.zip
The menu looks like you have described.
Leo

Can I make a copy of an AdvancedDataGrid Item Renderer?

I have manual drag-and-drop functionality built in to my
AdvancedDataGrid (ADG). Right now, I am building my own custom drag
proxy using a Container instance and grabbing the text to use from
the "selectedItem" property. This creates a suitable image to drag.
However, what I'd really like to do is have the drag proxy look
exactly like the item renderer of the item I'm dragging. I don't
want the whole row, though, only one cell - that's why I can't use
the ADG's "dragImage" property. When I run the code below to
attempt to make a copy of the itemRenderer instance, the
itemRenderer in the ADG for the source item is cleared out - the
label disappears. Is there some way to make just a "copy" of the
itemRenderer instance, so that it doesn't disappear from the
ADG?

"ericbelair" <[email protected]> wrote in
message
news:gecebe$17j$[email protected]..
>I have manual drag-and-drop functionality built in to my
AdvancedDataGrid
> (ADG). Right now, I am building my own custom drag proxy
using a Container
> instance and grabbing the text to use from the
"selectedItem" property.
> This
> creates a suitable image to drag. However, what I'd
really like to do is
> have
> the drag proxy look exactly like the item renderer of
the item I'm
> dragging. I
> don't want the whole row, though, only one cell - that's
why I can't use
> the
> ADG's "dragImage" property. When I run the code below to
attempt to make a
> copy
> of the itemRenderer instance, the itemRenderer in the
ADG for the source
> item
> is cleared out - the label disappears. Is there some way
to make just a
> "copy"
> of the itemRenderer instance, so that it doesn't
disappear from the ADG?
>
> // This is the container I use for my dragProxy
> var proxyBox:VBox = new VBox();
>
> for each (var item:Object in this.selectedItems)
> {
> var selectedItemRenderer:IListItemRenderer =
> super.itemToItemRenderer(item);
>
> proxyBox.addChild(DisplayObject(selectedItemRenderer));
> }
The itemRenderer is made by the ADG using the ClassFactory of
the
itemRenderer class.
I think you can search for the appropriate ClassFactory for
that column,
then make a new renderer from that Factory. Set its data
and/or listData to
the same as the existing renderer.
This might look something like this:
var factory:IFactory;
var renderer:IListItemRenderer;
//populate factory with the appropriate renderer factory
//you need to do this part
factory=?;
renderer = factory.getInstance();
renderer.data=selectedItemRenderer.data;
renderer.listData=selectedItemRenderer.listData;
proxyBox.addChild(DisplayObject(renderer));
You also might find that you can shortcut this by using new
(getDefinitionByName(selectedItemRenderer.className)) instead
of the
factory.
HTH;
Amy

Getting the value of a checkbox in an item renderer?

I have a list that uses an item renderer with buttons and data. I need to add a checkbox and get the value of this checkbox passed along with the event of the pushbutton.
When the user clicks "add to menu: there is a click handler:
protected function addButton_clickHandler(event:MouseEvent):void
                    doubleIt = double.selected;
                    owner.dispatchEvent(new Event("ADD_TO_MENU", true));
Back in the main application, there is a listener for this event. I want that handler to be able to "know" the status of that checkbox (i.e. the value of "doubleIt", defined as a public boolean).
private function addToMenuHandler(event:Event):void {
           var i:int = event.target.selectedIndex;
           var obj:Object = new Object();
           obj = recipeListCollection.getItemAt(i);
           menuList += obj;
I have tried various permutations of the event.target, but can't figure out how to access that variable.

Create a custom event and stuff anything you want in there.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui

When to use Drop In Item renderer and InLine Item Renderers ??

Hi ,
I am getting confused in where to use Inline ItemRenderer and DropIn Item Renderer .
What i feel is that DROP in Item Renderer are easy to use , and those can satisfy any requirements .
What i read from tutorilas that we cant use Drop In because they say , The only drawback to using drop in is that them is that you cannot configure them
Please help me .

Hi Kiran,
Here is the detailed explanation you needed:
You can also refer the link below:
http://blog.flexdevelopers.com/2009/02/flex-basics-item-renderers.html
Drop-In Item Renderers
Drop-In Item Renderers are generic in nature and don't rely on specific data fields to render data. This allows them to be used with a wide range of data sets, hence, the term “drop-in”. Drop-In Item Renderers can be “dropped-in” to any list-based control regardless of the dataprovider’s data properties.
In our previous example, the employee photo property requires use of a custom Item Renderer to render properly in the UI. In this scenario the Image component satisfies our rendering needs out of the box. Implemented as a Drop-In Item Renderer, the Image component takes any data property regardless of name and uses it as the Image component's source property value. Assuming our employee photo property contains a valid image path, the Image Drop-In Item Renderer will work perfectly and resolve the image path as an image in the UI.

<mx:DataGridColumn dataField="photo"
                   headerText="Employee Photo"
                   itemRenderer="mx.controls.Image"/>
Drop-In Item Renderers are simple and easy to use and satisfy specific use cases nicely. However, they provide no flexibility whatsoever. If your needs are not satisfied by a Drop-In Item Renderer, you must create your own Item Renderer as an inline component or an external component.
Inline Item Renderers
Generally used for simple item rendering requiring minimal customization, inline Item Renderers are defined as a component nested within the MXML of your list-based control.
It is important to note that Item Renderers nested within the itemrender property of a list-based control occupy a different scope than the list-based control. Any attempt to reference members (properties or methods) of the parent component from the nested Item Renderer component will result in a compile-time error. However, references to the members of the parent component can be achieved by utilizing the outerDocument object.
<mx:DataGrid id="myGrid" dataProvider="{gridData}">
   <mx:columns>
      <mx:DataGridColumn headerText="Show Relevance">
         <mx:itemRenderer>
            <mx:Component>
               <mx:Image source="{'assets/images/indicator_' + data.showRelevance + '.png'}"
                         toolTip="{(data.showRelevance == 1) ? 'On' : 'Off'}"
                         click="outerDocument.toggle()" />
            </mx:Component>
         </mx:itemRenderer>
      </mx:DataGridColumn>
   </mx:columns>
</mx:DataGrid>
Remember, rules of encapsulation still apply. Mark all properties or methods public if you want them accessible by your inline Item Renderer. In the previous example, the toggle() method must have a public access modifier to expose itself to the inline Item Renderer.
public function toggle():void
Inline Item Renderers can also be reusable by creating a named component instance outside of the list-based control. This component must have an id property and contain the rendering logic of the Item Renderer. Using data bindings, the component is assigned to the itemrenderer property of one or more data properties of a list-based control.

<mx:Component id="ImageRenderer">
   <mx:VBox width="100%" height="140"
            horizontalAlign="center" verticalAlign="middle">
      <mx:Image source="{'assets/'+data.image}"/>
      <mx:Label text="{data.image}" />
   </mx:VBox>
</mx:Component>

<mx:DataGridColumn headerText="Image"
                   dataField="image" width="150"
                   itemRenderer="{ImageRenderer}"/>
In the previous example, note that the Item Renderer component contains 2 UI controls – Image and Label. When using multiple controls within an Item Renderer, a layout container is required. In this example, a VBox was used.
If this post answers your question or helps, please kindly mark it as such.
Thanks,
Bhasker Chari
Message was edited by: BhaskerChari

Flex SDK 3.4 Tree Item Renderer Root Folder displays Tooltip for Child

I have a Flex Tree that uses a custom item renderer. The item renderer extends Tree Item Renderer and I add my button in commit properties (since the data is dynamic) and I use update displaylist to move it to the right position. I set the button to be visible on rollover and make the icon invisible. On rollout I reverse that logic.
When I have my item renderer add the button, it causes only one problem and it seems to be under certain conditions:
- Single root folder for the tree
- Upon opening the tree, the root folder displays the tool tip for the last child in the tree
Any idea why the tooltip comes up?
public function AssetTreeItemRenderer ()
            super();
            addEventListener(MouseEvent.ROLL_OVER, onItemRollover);
            addEventListener(MouseEvent.ROLL_OUT, onItemRollout);
            addEventListener(ToolTipEvent.TOOL_TIP_SHOWN, toolTipShown);
            addEventListener(ToolTipEvent.TOOL_TIP_CREATE, onCreateToolTip);
        // OVERRIDEN FUNCTIONS
         * override createChildren
        override protected function commitProperties():void {
            super.commitProperties();
            if(data is IAsset) {
                if(playBtn === null) {
                    playBtn = new Button();
                    playBtn.styleName = "previewPlayButton";
                    playBtn.toolTip = "Play";
                    playBtn.width = icon.width + 2;
                    playBtn.height = icon.height + 2;
                    playBtn.visible = false;
                    playBtn.addEventListener(MouseEvent.CLICK, onPlayBtnClick);
                    addChild(playBtn);
            } else {
                if(playBtn !== null) {
                    removeChild(playBtn);
                    playBtn = null;
         * override updateDisplayList
         * @param Number unscaledWidth
         * @param Number unscaledHeight
        override protected function updateDisplayList(unscaledWidth:Number,
                                                      unscaledHeight:Number):void
            super.updateDisplayList(unscaledWidth, unscaledHeight);
            //Move our play button to the correct place
            if(super.data && playBtn !== null)
                playBtn.x = icon.x;
                playBtn.y = icon.y;

You are not clearing tooltip if data is not IAsset

Item Renderer as a Custom Compent & Class

Similar Messages

Maybe you are looking for