kagamihogeの日記

kagamihogeの日記です。

Flex の DataGrid のツールチップの出し方

Flex - List コントロール を参考にしつつ。

<?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;
            
            [Bindable]
            private var gridData:ArrayCollection = new ArrayCollection([
                {hoge:"hoge0", foo:"foo0", bar:"bar0", piyo:"piyo0", fuga:"fuga0"},
                {hoge:"hoge1", foo:"foo1", bar:"bar1", piyo:"piyo1", fuga:"fuga1"},
                {hoge:"hoge2", foo:"foo2", bar:"bar2", piyo:"piyo2", fuga:"fuga2"}]);
            
            private function gridDataTipFunction(item:Object):String {
                return item.hoge + item.foo + item.bar + item.piyo + item.fuga;
            }
        ]]>
    </mx:Script>

    <mx:DataGrid id="dataGridId" x="18" y="18" showDataTips="true" dataProvider="{gridData}">
        <mx:columns>
            <mx:DataGridColumn headerText="hoge header" dataField="hoge" showDataTips="true"/>
            <mx:DataGridColumn headerText="foo  header" dataField="foo" showDataTips="false"/>
            <mx:DataGridColumn headerText="bar  header" dataField="bar" showDataTips="true"
                dataTipFunction="gridDataTipFunction" />
            <mx:DataGridColumn headerText="piyo header" dataField="piyo" showDataTips="true"
                dataTipField="fuga"/>
        </mx:columns>
    </mx:DataGrid>
    
</mx:Application>

まず、DataGrid, DataGridColumn 双方に showDataTips というプロパティがあり、これを true にしないとツールチップが出てこない。DataGrid に設定すると全列適用になる。列ごとにツールチップの有無を分けたい場合は DataGridColumn それぞれにつける。showDataTips を true にすると、グリッドに表示されてるラベルのテキストが表示される。これがデフォルトの動作。

ツールチップに別の文字列を表示したい場合。やり方は 2 つあって、異なる列の値を表示したい場合は dataTipField にその列のフィールド名を指定する。任意の文字列を表示したい場合は dataTipFunction に関数を指定する。引数にはその列のデータが入ったオブジェクトが渡されるようだ。