-1

I want to add panel component as my tooltip for each row in my Spark DataGrid. So when mouse rollover the user can see the information for each the ship. I want a panel as my tooltip for dataGrid cause I want to organize my data neatly and also place a image in the panel.

I came across : http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html where they show an example of "Implementing the IToolTip interface" using the panel.I tried manipulating the codes but it didt work for my spark dataGrid.

So my question :

Can some one pls show me how I can use the Panel as my tool tip for each row in spark data grid.

I have been struggling for quite some time.If possible pls Give me an example.

This is my codes below (I tried to follow the example from : http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html#WS2db454920e96a9e51e63e3d11c0bf60d65-7ff4 -"Implementing the IToolTip interface")

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

My Custom panel :

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

4

2 回答 2

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>
于 2013-04-09T07:25:58.913 回答
0

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

ToolTipManager.toolTipClass = PanelToolTip;

和重构代码。

于 2013-02-14T13:53:54.517 回答