Automatische Anzeige einer QuickInfo in einem ItemRenderer, wenn die Zeile im DataGrid sichtbar ist

Question

Ich habe eine AdvancedDataGrid, die HierarchicalData verwendet, um Daten in einem Baumformat anzuzeigen. Für eine der Spalten verwende ich eine AdvancedDataGridRendererProvider, um ein Bild bedingt anzuzeigen, wenn bestimmte Bedingungen erfüllt sind. Ich verwende derzeit die ToolTipManager, um zusätzliche Informationen anzuzeigen, wenn der Benutzer über das Bild mausiert.

Hier ist, was ich tun möchte:

Statt die toolTip zeigen, wenn der Benutzer mit der Maus über das Bild legt, ich möchte automatisch die toolTip angezeigt werden, wenn das Bild in der AdvancedDataGrid sichtbar ist. Wenn der Benutzer durch die AdvancedDataGrid scrollt, sollte sich die toolTip verschieben und mit seinem Bild entsprechend folgen.

Probe Advanced:

<mx:AdvancedDataGrid id="myAdvancedDataGrid" 
         displayItemsExpanded="true" 
         allowMultipleSelection="false" 
         dataProvider="{myTreeData}" 
         draggableColumns="false" 
         depthColors="{[0xD6E5FF,0xFFFFFF]}" 
         folderClosedIcon="{null}" folderOpenIcon="{null}" defaultLeafIcon="{null}"> 
    <mx:columns> 
     <mx:AdvancedDataGridColumn id="colID" headerText="ID" dataField="myID"/> 
     <mx:AdvancedDataGridColumn id="colComments" headerText="Comments" dataField="comments"/> 
    </mx:columns> 
    <mx:rendererProviders> 
     <mx:AdvancedDataGridRendererProvider column="{colComments}" depth="2" dataField="comments" renderer="com.whatever.AdvancedDataGridCommentsRenderer" /> 
    </mx:rendererProviders> 
</mx:AdvancedDataGrid> 

Und die aktuelle AdvancedDataGridRendererProvider:

<?xml version="1.0" encoding="utf-8"?> 
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" 
     paddingLeft="2" paddingRight="2" paddingTop="2" 
     horizontalScrollPolicy="off" 
     verticalScrollPolicy="off" 
     height="22" 
     horizontalAlign="center"> 
    <fx:Script> 
     <![CDATA[ 
      import mx.controls.ToolTip; 
      import mx.events.FlexEvent; 
      import mx.managers.ToolTipManager; 
      [Embed(source="assets/myImage.png")] 
      [Bindable] 
      private var myIcon:Class; 

      private var commentsToolTip:ToolTip; 

      override public function set data(value:Object):void 
      { 
       super.data = value; 
       if (value["comments"] != null) 
       { 
        if (value["comments"].toString().length > 0) 
        { 
         myImage.visible = true; 
        } 
        else 
        { 
         myImage.visible = false; 
        } 
       } 
       else 
       { 
        myImage.visible = false; 
       } 

       validateDisplayList(); 
      } 

      private function showToolTip(evt:Event, text:String):void 
      { 
       var pt:Point = new Point(evt.currentTarget.x, evt.currentTarget.y); 

       // Convert the targets 'local' coordinates to 'global' -- this fixes the 
       // tooltips positioning within containers. 
       pt = evt.currentTarget.parent.contentToGlobal(pt); 

       commentsToolTip = ToolTipManager.createToolTip(text, pt.x, pt.y, "errorTipAbove") as ToolTip; 
       commentsToolTip.setStyle("borderColor", "#ff0000"); 
       commentsToolTip.setStyle("color", "white"); 
       var yOffset:int = commentsToolTip.height + 5; 
       commentsToolTip.y -= yOffset; 
       commentsToolTip.x -= 5; 
      } 

      // Remove the tooltip 
      private function killToolTip():void 
      { 
       ToolTipManager.destroyToolTip(commentsToolTip); 
      } 
     ]]> 
    </fx:Script> 
    <mx:Image id="myImage" 
       source="{myIcon}" 
       mouseOver="showToolTip(event, data['comments'].toString())" 
       mouseOut="killToolTip()" /> 
</mx:HBox> 

Irgendwelche Vorschläge?

Answer 1

Wenn der Tooltip immer dann angezeigt werden muss, wenn das Bild angezeigt wird, handelt es sich nicht wirklich um eine QuickInfo, die Sie benötigen. In diesem Fall sollten Sie Ihrem Elementrenderer nur ein Canvas/Textfeld hinzufügen.

z.B.

<mx:HBox id="myContainer"> 
    <mx:Image id="myImage" 
      source="{myIcon}" 
      mouseOver="showToolTip(event, data['comments'].toString())" 
      mouseOut="killToolTip()" /> 
    <mx:Label text="Some text" /> 
</mx:HBox> 

Dann setzen die Anrufe myImage.visible ändern

jedoch für die schnelle und schmutzige Fix myContainer.visible, haben Sie bereits alles, was Sie haben müssen, nur die Anrufe in der eingestellten Datenüberschreibung machen:

 override public function set data(value:Object):void 
     { 
      super.data = value; 
      if (value["comments"] != null) 
      { 
       if (value["comments"].toString().length > 0) 
       { 
        myImage.visible = true; 
        showToolTip(<params>); 
       } 
       else 
       { 
        myImage.visible = false; 
        killToolTip(<params>); 
       } 
      } 
      else 
      { 
       myImage.visible = false; 
      } 

      validateDisplayList(); 
     }