3 Replies Latest reply on Oct 20, 2009 4:08 PM by Geordie Moffatt

    Problem overloading "set data" function on Button DataGrid Renderer

    Geordie Moffatt Level 1

      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!