0

我有一个AdvancedDataGrid用于HierarchicalData以树格式显示数据的方法。AdvancedDataGridRendererProvider对于其中一列，如果满足某些条件，我将使用有条件地显示图像。ToolTipManager如果用户将鼠标悬停在图像上，我目前正在使用来显示附加信息。

这是我想做的事情：

toolTip我不想显示用户将鼠标放在图像上的时间，而是希望在toolTip图像在AdvancedDataGrid. 如果用户滚动浏览AdvancedDataGrid，则toolTip应该相应地移动并跟随其图像。

示例 AdvancedDataGrid：

<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>

以及当前的 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>

有什么建议么？

4

1 回答 1

1

如果在显示图像时需要一直显示工具提示，那么它并不是您真正需要的工具提示，在这种情况下，您应该只在项目渲染器中添加一个画布/文本字段。

例如

<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>

然后将对 myImage.visible 的调用设置为 myContainer.visible

但是，对于快速而肮脏的修复，您已经拥有了所需的一切，只需在 set data override 中进行调用：

        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();
        }
于 2011-01-11T22:16:06.177 回答