Flex中如何截去DataGrid列头部部分文本用一个ToolTip显示的例子

By Minidxer | March 26, 2009

接下来的例子演示了Flex中如何截去DataGrid列头部部分文本用一个ToolTip显示。

让我们先来看一下Demo可以右键View Source或点击这里察看源代码):


下面是完整代码(或点击这里察看):

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:XML id="xmlDP">
  8.         <nodes>
  9.             <node col1="One.1" col2="One.2" />
  10.             <node col1="Two.1" col2="Two.2" />
  11.             <node col1="Three.1" col2="Three.2" />
  12.             <node col1="Four.1" col2="Four.2" />
  13.             <node col1="Five.1" col2="Five.2" />
  14.             <node col1="Six.1" col2="Six.2" />
  15.             <node col1="Seven.1" col2="Seven.2" />
  16.             <node col1="Eight.1" col2="Eight.2" />
  17.             <node col1="Nine.1" col2="Nine.2" />
  18.         </nodes>
  19.     </mx:XML>
  20.  
  21.     <mx:DataGrid id="dataGrid"
  22.             dataProvider="{xmlDP.node}"
  23.             width="300"
  24.             height="200">
  25.         <mx:columns>
  26.             <mx:DataGridColumn dataField="@col1"
  27.                     headerText="The quick brown fox jumped over the lazy dog"
  28.                     headerRenderer="mx.controls.Label" />
  29.             <mx:DataGridColumn dataField="@col2"
  30.                     headerText="Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
  31.                     headerRenderer="mx.controls.Label" />
  32.         </mx:columns>
  33.     </mx:DataGrid>
  34.  
  35. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: DataGrid | No Comments » | 1,700 views Tags: , , ,

Search Posts