Problem overloading "set data" function on Button DataGrid Renderer

Question

Hi all, I'm hoping this is something simple.
I have a class that extends mx.controls.Button and implements mx.core.IDataRenderer.  I need to set the button icon whenever the Data property is set from the DataGrid.  My problem is that my overloaded set/get Data function are never called (I've stepped through the code in debug).  Instead the set/get functions in Container.as (Flex 3.4 SDK) get called.
Here's the basics code:
exportButtonRenderer.as
package controls
    import flash.events.Event;
    import flash.events.MouseEvent;
    import mx.controls.Button;   
    import mx.core.IDataRenderer;
    import mx.controls.dataGridClasses.DataGridListData;   
    import mx.controls.listClasses.BaseListData;
    import mx.events.FlexEvent;
    import mx.controls.Alert;
    import model.descriptors.compDescriptor;
    import events.exportClickedEvent;   
    public class exportButtonRenderer extends Button implements IDataRenderer   
        //    embed your icons
        [Embed(source='/assets/icons/export.png')]
        [Bindable]
        public static var imageExport:Class;
        [Embed(source='/assets/icons/blank.png')]
        [Bindable]
        public static var imageBlank:Class;
        public function exportButtonRenderer()
            super();
        private var _listData:DataGridListData;
        override public function get listData():BaseListData
            return _listData;
        override public function set listData(value:BaseListData):void
            _listData = DataGridListData(value);
        private var _data:Object;       
        override public function get data():Object
            return _data;
        override public function set data(value:Object):void
            _data = value;
        override protected function clickHandler(event:MouseEvent):void
            super.clickHandler(event);   
Now I know I'm using the Flexlib TreeGrid and not a standard DataGrid but when I trace through all the code all code firing the set/get functions is coming from the DataGrid anyway.
Here's the my Grid def in my main app mxml:
Header 1
<flexlib:TreeGrid
        id="MKTXGrid"
        dragEnabled="false" sortableColumns="false" showRoot="false"
        disclosureClosedIcon="@Embed(source='/assets/icons/arrow_right.png')"
        disclosureOpenIcon="@Embed(source='/assets/icons/arrow_down.png')"
        folderOpenIcon="@Embed(source='/assets/icons/psd.png')"
        folderClosedIcon="@Embed(source='/assets/icons/psd.png')"       
        click="MKTXGrid_clickHandler(event)"
         doubleClickEnabled="true" doubleClick="MKTXGrid_doubleClickHandler(event)" left="0" right="0" top="0" bottom="16">
    <flexlib:columns>
            <flexlib:TreeGridColumn dataField="Name" headerText = "Name" minWidth="200" width="200" editable="true"/>
            <mx:DataGridColumn dataField="ExportName" headerText = "Export Name"/>
            <mx:DataGridColumn dataField="Export" headerText = "Export" width="50" minWidth="20" resizable="false">
             <mx:itemRenderer>
                <mx:Component>
                    <mx:Box horizontalAlign="center" width="100%" verticalScrollPolicy="off" horizontalScrollPolicy="off">
                        <controls:exportButtonRenderer label="Export" icon="@Embed(source='assets/icons/export.png')" width="12" height="12" useHandCursor="true">                        
                            <controls:click>
                                <![CDATA[
                                    import events.exportClickedEvent;
                                    var e:exportClickedEvent = new exportClickedEvent();
                                    e.itemData = data;
                                    dispatchEvent(e);
                                ]]>
                            </controls:click>
                        </controls:exportButtonRenderer>
                    </mx:Box>
                </mx:Component>
            </mx:itemRenderer>
            </mx:DataGridColumn>
        </flexlib:columns>
    </flexlib:TreeGrid>
Nothing too special going on.
I know this can be done, I've seen examples in the SDK:
http://opensource.adobe.com/svn/opensource/durango/trunk/ExternalFlexTools/com/dougmccune/ containers/accordionClasses/AccordionHeader.as
By the way I've stepped through the code of the TreeGridItemRenderer class in Flexlib which works correctly and the class def starts like this:
TreeGridItemRenderer.as
import flash.display.DisplayObject;
import flash.display.InteractiveObject;
import flash.display.Shape;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.geom.Rectangle;
import flexlib.controls.TreeGrid;
import mx.controls.Image;
import mx.controls.dataGridClasses.DataGridListData;
import mx.controls.listClasses.BaseListData;
import mx.controls.listClasses.IDropInListItemRenderer;
import mx.controls.listClasses.IListItemRenderer;
import mx.core.IDataRenderer;
import mx.core.IFlexDisplayObject;
import mx.core.IToolTip;
import mx.core.SpriteAsset;
import mx.core.UIComponent;
import mx.core.UITextField;
import mx.events.FlexEvent;
import mx.events.ToolTipEvent;
import mx.events.TreeEvent;
import mx.managers.ILayoutManagerClient;
import mx.styles.IStyleClient;
public class TreeGridItemRenderer extends UIComponent
                                  implements IDataRenderer,
                                               IDropInListItemRenderer,
                                             ILayoutManagerClient,
                                               IListItemRenderer
Any help would be great!

Answer 1

That's because you put your component in a Box.  The DataGrid is setting the Box's .data property and no code is setting the one on your component.  You shouldn't really need Box.  You can override updateDisplayList to center your Button instead.
Alex Harui
Flex SDK Developer
Adobe Systems Inc.
Blog: http://blogs.adobe.com/aharui