在DataGrid上显示toolTip

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

 

    <mx:Script>

       <![CDATA[

           private function showTip(obj:XML):String

           {

              return obj.phone;

           }

       ]]>

    </mx:Script>

 

    <mx:XMLList id="employees">

        <employee>

            <name>Christina Coenraets</name>

            <phone>555-219-2270</phone>

            <email>[e-mail]</email>

            <active>true</active>

        </employee>

        <employee>

            <name>Joanne Wall</name>

            <phone>555-219-2012</phone>

            <email>[e-mail]</email>

            <active>true</active>

        </employee>

        <employee>

            <name>Maurice Smith</name>

            <phone>555-219-2012</phone>

            <email>[e-mail]</email>

            <active>false</active>

        </employee>

        <employee>

            <name>Mary Jones</name>

            <phone>555-219-2000</phone>

            <email>[e-mail]</email>

            <active>true</active>

        </employee>

    </mx:XMLList>

 

    <mx:Panel title="DataGrid Control Example" height="100%" width="100%"

        paddingTop="10" paddingLeft="10" paddingRight="10">

 

       <!--三种方法在DataGrid上显示toolTip，此DataGrid上共显示了三列，前两列需要将showDataTips属性设为true！！

          第一列采用设置列属性dataTipField的方式来显示toolTip，本示例中可以设为：name，phone，email或active；

           第二列采用设定Tip函数dataTipFunction的方式来显示，此函数默认会获取本列绑定的数据作为参数，所以不需指定；

           第三列采用itemRenderer的方式，给其中的控件指定toolTip来达到目的，此处用的是Text，用label会更好一些，

           在内容显示不全的时候，label会自动显示toolTip，无需指定。-->

        <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{employees}">

            <mx:columns>

                <mx:DataGridColumn dataField="name" headerText="Name" showDataTips="true" dataTipField="name"/>

                <mx:DataGridColumn dataField="phone" headerText="Phone" showDataTips="true" dataTipFunction="showTip"/>

                <mx:DataGridColumn headerText="Email">

                  <mx:itemRenderer>

                      <mx:Component>

                         <mx:Text text="{data.email}" toolTip="{data.email}"/>

                      </mx:Component>

                  </mx:itemRenderer>

                </mx:DataGridColumn>

            </mx:columns>

        </mx:DataGrid>

       

    </mx:Panel>

</mx:Application>