0

データをツリー形式で表示するためAdvancedDataGridに使用するがあります。HierarchicalData列の 1 つで、AdvancedDataGridRendererProvider特定の条件が満たされた場合に条件付きで画像を表示するために を使用しています。ToolTipManager現在、ユーザーが画像の上にマウスを置いた場合に追加情報を表示するためにを使用しています。

これが私がやりたいことです：

ユーザーがマウスを画像の上に置いたときに を表示する代わりに、画像が に表示されるたびtoolTipに を自動的に表示したいと考えています。ユーザーが をスクロールすると、が移動し、それに応じて画像に追従する必要があります。toolTipAdvancedDataGridAdvancedDataGridtoolTip

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 に変更します。

ただし、迅速で汚い修正のために、必要なものはすべて既にあります。設定されたデータのオーバーライドで呼び出しを行うだけです。

        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 に答える