Apache flex 如何向spark数据网格添加自定义工具提示？

我想为Spark DataGrid中的每一行添加面板组件作为工具提示。因此，当鼠标滚动时，用户可以看到船上每个人的信息。我想要一个面板作为dataGrid的工具提示，因为我想要整齐地组织数据，并在面板中放置图像

我发现： 在这里，他们展示了一个使用面板“实现IToolTip接口”的示例。我尝试了操作代码，但对于我的spark dataGrid无效

因此，我的问题是：

请告诉我如何使用面板作为spark数据网格中每一行的工具提示

我已经挣扎了很长时间。如果可能的话，请给我举个例子

下面是我的代码（我试图按照：-“实现IToolTip接口”中的示例进行操作）

我的自定义面板：

<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
     implements="mx.core.IToolTip" >
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
    <![CDATA[
        [Bindable]
        public var bodyText:String = "";

        //  Implement required methods of the IToolTip interface; these 
        //  methods are not used in this example, though.
        public var _text:String;

        public function get text():String { 
            return _text; 
        } 
        public function set text(value:String):void {
        } 
    ]]>
</fx:Script>
<s:RichText text="{bodyText}" percentWidth="100"/>

---

简单方法-当应用程序准备就绪时，使用：

ToolTipManager.toolTipClass = PanelToolTip;

和重构代码。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;

            import spark.components.Grid;

            [Bindable]private var collection:ArrayCollection = new ArrayCollection([
                {field01:"field01", content:"your content", field02:"field02"},
                {field01:"field01", content:"your content your content your content your content", field02:"field02"},
                {field01:"field01", content:"your content your content your content your content", field02:"field02"}
            ]);





        ]]>
    </fx:Script>
    <fx:Script>
        <![CDATA[       
            import mx.collections.ArrayCollection;          
            import mx.controls.Alert;   
            import spark.events.GridEvent;          
            import spark.components.Image;


            [Bindable]
            private var myArrivalShips:ArrayCollection = new ArrayCollection([
                {arrivalShipsName:"Ship A", ETD:"12 March"},
                {arrivalShipsName:"Ship B", ETD:"25 March"}             
            ]); 

            private function buildToolTip(item:Object,column:GridColumn):String{
                var myString:String = "";
                var myString:String = "";
                if(column.columnIndex==0){
                    myString=myString+"Arrival Ships";
                }
                else if(column.columnIndex==1){
                    myString=myString+"ETD";
                }
                return myString;
            }


        ]]>
    </fx:Script>
    <s:BorderContainer x="267" y="11" width="331" height="586">

        <s:DataGrid id="arrivalTable" x="10" y="326" width="302" height="205" requestedRowCount="4" dataProvider="{myArrivalShips}" showDataTips="true" dataTipFunction="buildToolTip">
            <s:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="arrivalShipsName" headerText="Arrival Ships"></s:GridColumn>
                    <s:GridColumn dataField="ETD" headerText="ETD"></s:GridColumn>              
                </s:ArrayList>
            </s:columns>            

        </s:DataGrid>
        <s:BorderContainer x="10" y="19" width="302" height="285">
        </s:BorderContainer>

    </s:BorderContainer>

</s:Application>

在标记中使用

creationComplete

事件。内部处理程序add

ToolTipManager.toolTipClass=PanelToolTip

。删除

createCustomTip

方法。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
               xmlns:s="library://ns.adobe.com/flex/spark" 
               xmlns:mx="library://ns.adobe.com/flex/mx" 
               minWidth="955" minHeight="600">
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.controls.Alert;

            import spark.components.Grid;

            [Bindable]private var collection:ArrayCollection = new ArrayCollection([
                {field01:"field01", content:"your content", field02:"field02"},
                {field01:"field01", content:"your content your content your content your content", field02:"field02"},
                {field01:"field01", content:"your content your content your content your content", field02:"field02"}
            ]);





        ]]>
    </fx:Script>
    <fx:Script>
        <![CDATA[       
            import mx.collections.ArrayCollection;          
            import mx.controls.Alert;   
            import spark.events.GridEvent;          
            import spark.components.Image;


            [Bindable]
            private var myArrivalShips:ArrayCollection = new ArrayCollection([
                {arrivalShipsName:"Ship A", ETD:"12 March"},
                {arrivalShipsName:"Ship B", ETD:"25 March"}             
            ]); 

            private function buildToolTip(item:Object,column:GridColumn):String{
                var myString:String = "";
                var myString:String = "";
                if(column.columnIndex==0){
                    myString=myString+"Arrival Ships";
                }
                else if(column.columnIndex==1){
                    myString=myString+"ETD";
                }
                return myString;
            }


        ]]>
    </fx:Script>
    <s:BorderContainer x="267" y="11" width="331" height="586">

        <s:DataGrid id="arrivalTable" x="10" y="326" width="302" height="205" requestedRowCount="4" dataProvider="{myArrivalShips}" showDataTips="true" dataTipFunction="buildToolTip">
            <s:columns>
                <s:ArrayList>
                    <s:GridColumn dataField="arrivalShipsName" headerText="Arrival Ships"></s:GridColumn>
                    <s:GridColumn dataField="ETD" headerText="ETD"></s:GridColumn>              
                </s:ArrayList>
            </s:columns>            

        </s:DataGrid>
        <s:BorderContainer x="10" y="19" width="302" height="285">
        </s:BorderContainer>

    </s:BorderContainer>

</s:Application>