ToolTip Personalisée et Datagrid
Bonjour,
Je veux afficher un toolTip de mon cru quand la souris passe sur une ligne d'un dataGrid.
(ici une image à gauche et un formulaire à droite rappelant les infos de la ligne)
Ça marche à peu près, mais juste la première fois.
Si je passe d'une ligne à une autre, j'ai toujours le même toolTip affiché.
En revanche si la souris quitte le datagrid et reviens sur celui ci, le bon toolTip est affiché.
Voici donc mon code :
TestCustomToolTipDatagrid.mxml
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.ToolTipEvent;
import mx.events.ListEvent
[Bindable]
private var elements : ArrayCollection = new ArrayCollection([
{col1:"A1", col2:"A2", col3:"A3", img:"../assets/A.png"},
{col1:"B1", col2:"B2", col3:"B3", img:"../assets/B.png"},
{col1:"C1", col2:"C2", col3:"C3", img:"../assets/C.png"},
]);
private function onCreateCustomToolTip(event:ToolTipEvent):void
{
var customToolTip:CustomToolTip = new CustomToolTip();
customToolTip.element = event.target.data;
event.toolTip = customToolTip;
}
private function itemRollOver(event:ListEvent):void
{
event.target.data = event.itemRenderer.data;
}
private function itemRollOut(event:ListEvent):void
{
event.target.data = event.itemRenderer.data;
//event.target.toolTip = null;
}
]]>
</mx:Script>
<mx:DataGrid id="grid" dataProvider="{elements}"
toolTip=" " toolTipCreate="onCreateCustomToolTip(event)"
itemRollOver="itemRollOver(event)" itemRollOut="itemRollOut(event)">
<mx:columns>
<mx:DataGridColumn headerText="col1" dataField="col1"/>
<mx:DataGridColumn headerText="col2" dataField="col2"/>
<mx:DataGridColumn headerText="col3" dataField="col3"/>
</mx:columns>
</mx:DataGrid>
</mx:Application> |
et CustomToolTip.mxml
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
| <?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
implements="mx.core.IToolTip"
alpha="0.9"
borderThickness="5"
backgroundColor="#FFFFFF"
borderColor="black"
borderStyle="solid"
cornerRadius="10" horizontalAlign="center"
paddingTop="10" paddingBottom="10"
paddingLeft="10" paddingRight="10">
<mx:Script>
<![CDATA[
[Bindable]
private var _element:Object;
public function get element():Object
{
return _element;
}
public function set element(value:Object):void
{
_element = value;
}
public function get text():String
{
return null;
}
public function set text(value:String):void
{
}
]]>
</mx:Script>
<mx:Image source="{_element.img}" height="80" width="80"/>
<mx:Form paddingBottom="10" paddingTop="10"
paddingLeft="10" paddingRight="10" >
<mx:FormItem label="Col1 :">
<mx:Label text="{_element.col1}"/>
</mx:FormItem>
<mx:FormItem label="Col2 :">
<mx:Label text="{_element.col2}"/>
</mx:FormItem>
<mx:FormItem label="Col3 :">
<mx:Label text="{_element.col3}"/>
</mx:FormItem>
</mx:Form>
</mx:HBox> |
Avez vous des idées pour résoudre mon problème?
Merci d'avance!
