Question

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

我遇到过： http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html 他们使用面板显示了“实现IToolTip接口”的示例。我尝试操作代码，但它对我的spark dataGrid起作用。

所以我的问题：

有人可以告诉我如何使用Panel作为火花数据网格中每一行的工具提示。

我一直在苦苦挣扎。如果可能，请给我一个例子。

这是我的代码（我尝试按照以下示例进行操作：http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html#WS2db454920e96a9e51e63e3d11c0bf60d65-7ff4 - “实施IToolTip界面”）

 <fx:Script>
    <![CDATA[

        import DesignItemRenderer.PanelToolTip;
        import mx.events.ToolTipEvent;

        import mx.collections.ArrayCollection;          
        import mx.controls.Alert;   
        import spark.events.GridEvent;  

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



        private function createCustomTip(event:ToolTipEvent):void {
            var ptt:PanelToolTip = new PanelToolTip();
            ptt.title = "my Ship Info";
            ptt.bodyText = "my data for the ship";
            event.toolTip = ptt;
        }


    ]]>
</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}" toolTipCreate="createCustomTip(event)">
        <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: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"/>

Answer 1

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

Answer 2

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

ToolTipManager.toolTipClass = PanelToolTip;

并重构代码。

如何添加自定义工具提示以激发数据网格？

2 个答案: