在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> ccoenraets@fictitious.com </email>

            <active> true </active>

        </employee>

        <employee>

            <name> Joanne Wall </name>

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

            <email> jwall@fictitious.com </email>

            <active> true </active>

        </employee>

        <employee>

            <name> Maurice Smith </name>

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

            <email> maurice@fictitious.com </email>

            <active> false </active>

        </employee>

        <employee>

            <name> Mary Jones </name>

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

            <email> mjones@fictitious.com </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>