【转自FEIY】Flex：Label组件自动截断文本的妙用

Flex：Label组件自动截断文本的妙用

从 eshangrao 作者： feiy

mx.controls.Label组 件有一个很有用的特性，那就是如果其要显示的文本长度大于组件的宽度时候，会自动截断文本，并在文本后面添加上...表示文本还有未显示部分，而且还会显 示一个包括完整文本内容的ToolTip，所以将Label设置为DataGrid的Renderer，可将该特性用于在DataGrid里面截断过宽的 Header文本或用于截断显示不下的单元格内容...

mx.controls.Label组 件有一个很有用的特性，那就是如果其要显示的文本长度大于组件的宽度时候，会自动截断文本，并在文本后面添加上...表示文本还有未显示部分，而且还会显 示一个包括完整文本内容的ToolTip，所以将Label设置为DataGrid的Renderer，可将该特性用于在DataGrid里面截断过宽的 Header文本或用于截断显示不下的单元格内容，而当用户鼠标移到列上的时候不需要调整列宽，又可以通过Tooltip查看到单元格实际内容，是不是很 方便啊？！

以下是个示例代码：

 
 

  
  

   
   
   
   [xml]

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

   
   <
   
   mx:Application xmlns:mx
   
   =
   
   "
   
   http://www.adobe.com/2006/mxml
   
   "
   
   
    layout
   
   =
   
   "
   
   vertical
   
   "
   
   
    verticalAlign
   
   =
   
   "
   
   middle
   
   "
   
   
    backgroundColor
   
   =
   
   "
   
   white
   
   "
   
   >
   
   
    
    
   
   <
   
   mx:XML id
   
   =
   
   "
   
   xmlDP
   
   "
   
   >
   
   
        
   
   <
   
   nodes col1
   
   =
   
   "
   
   root
   
   "
   
   >
   
   
            
   
   <
   
   node col1
   
   =
   
   "
   
   mx.controls.Label:用于显示文本
   
   "
   
    col2
   
   =
   
   "
   
   Label 组件
   
   "
   
    
   
   />
   
   
            
   
   <
   
   node col1
   
   =
   
   "
   
   mx.core.Application：mx应用核心
   
   "
   
    col2
   
   =
   
   "
   
   核心组件
   
   "
   
    
   
   />
   
   
            
   
   <
   
   node col1
   
   =
   
   "
   
   测试
   
   "
   
    col2
   
   =
   
   "
   
   测试
   
   "
   
    
   
   />
   
   
        
   
   </
   
   nodes
   
   >
   
   
    
   
   </
   
   mx:XML
   
   >
   
   
    
   
   <
   
   mx:DataGrid id
   
   =
   
   "
   
   dataGrid
   
   "
   
   
        dataProvider
   
   =
   
   "
   
   {xmlDP.node}
   
   "
   
   
        width
   
   =
   
   "
   
   250
   
   "
   
   
        height
   
   =
   
   "
   
   200
   
   "
   
   >
   
   
            
   
   <
   
   mx:columns
   
   >
   
   
                
   
   <
   
   mx:DataGridColumn dataField
   
   =
   
   "
   
   @col1
   
   "
   
   
                    headerText
   
   =
   
   "
   
   Flex组件名称
   
   "
   
   
                    itemRenderer
   
   =
   
   "
   
   mx.controls.Label
   
   "
   
   
                    headerRenderer
   
   =
   
   "
   
   mx.controls.Label
   
   "
   
   />
   
   
                
   
   <
   
   mx:DataGridColumn dataField
   
   =
   
   "
   
   @col2
   
   "
   
   
                    headerText
   
   =
   
   "
   
   Flex组件详细说明，包括用法等
   
   "
   
   
                    itemRenderer
   
   =
   
   "
   
   mx.controls.Label
   
   "
   
   
                    headerRenderer
   
   =
   
   "
   
   mx.controls.Label
   
   "
   
    
   
   />
   
   
            
   
   </
   
   mx:columns
   
   >
   
   
    
   
   </
   
   mx:DataGrid
   
   >
   
   

   
   </
   
   mx:Application
   
   >