Автоматически отображать всплывающую подсказку в ItemRenderer, когда строка видна в DataGrid - PullRequest
Новая
       23

Автоматически отображать всплывающую подсказку в ItemRenderer, когда строка видна в DataGrid

0 голосов
/ 11 января 2011

У меня есть 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>

Есть предложения?

1 Ответ

1 голос
/ 12 января 2011

Если всплывающая подсказка должна отображаться все время, пока отображается изображение, на самом деле это не всплывающая подсказка, в этом случае вам просто нужно добавить текстовое поле холста / текста в средство визуализации элементов.

, например 

<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();
        }
...