如何添加自定義工具提示來激發數據網格？

-1

我想添加面板組件作爲我的Spark DataGrid中每一行的工具提示。所以當鼠標滾動時，用戶可以看到每艘船的信息。我想要一個面板作爲dataGrid的工具提示，因爲我想整齊地整理我的數據並在面板中放置圖像。如何添加自定義工具提示來激發數據網格？

我碰到： http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html ，他們表現出的「實現IToolTip接口」使用panel.I試圖操縱代碼，但它didt工作，爲我的火花的數據網格的例子。

所以我的問題：

有人請能告訴我怎樣才能使用面板作爲我的工具提示火花數據網格中的每一行。

我一直在奮鬥很長一段時間。如果可能請給我一個例子。

這是我下面的代碼（我試圖按照從例如：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"/>

來源

2013-02-08 user2017147

簡單方式 - 當應用程序準備好後，使用：

ToolTipManager.toolTipClass = PanelToolTip;

和重構代碼。

來源

2013-02-14 13:53:54

嗨..我應該在哪裏添加上面的代碼？ sry我新來flex .. – user2017147

在標籤中使用'creationComplete'事件。內部處理程序添加'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>

來源

2013-04-09 07:25:58 madhusmita

如何添加自定義工具提示來激發數據網格？

回答

相關問題