Flex中如何通过headerWordWrap属性设置DataGrid头部文字是否折返的例子

By Minidxer | September 15, 2008

接下来的例子演示了Flex中如何通过headerWordWrap属性，设置DataGrid头部文字是否折返。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application name="DataGridColumn_headerWordWrap_test"
  3.         xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="top"
  6.         backgroundColor="white">
  7.  
  8.     <mx:XML id="dp" source="data/products.xml" />
  9.  
  10.     <mx:ApplicationControlBar dock="true">
  11.         <mx:Form styleName="plain">
  12.             <mx:FormItem label="headerWordWrap:">
  13.                 <mx:CheckBox id="checkBox" />
  14.             </mx:FormItem>
  15.             <mx:FormItem label="rowCount:">
  16.                 <mx:HSlider id="slider"
  17.                         minimum="2"
  18.                         maximum="10"
  19.                         value="6"
  20.                         snapInterval="1"
  21.                         tickInterval="1"
  22.                         liveDragging="true"
  23.                         showTrackHighlight="true" />
  24.             </mx:FormItem>
  25.         </mx:Form>
  26.     </mx:ApplicationControlBar>
  27.  
  28.     <mx:DataGrid id="dataGrid"
  29.             dataProvider="{dp.product}"
  30.             rowCount="{slider.value}"
  31.             verticalScrollPolicy="on"
  32.             width="300">
  33.         <mx:columns>
  34.             <mx:DataGridColumn id="dataGridColumn1"
  35.                     dataField="@name"
  36.                     headerText="This is a column with a long title:"
  37.                     headerWordWrap="{checkBox.selected}"
  38.                     minWidth="80" />
  39.             <mx:DataGridColumn id="dataGridColumn2"
  40.                     dataField="@price"
  41.                     headerText="Price:"
  42.                     headerWordWrap="false"
  43.                     minWidth="20" />
  44.         </mx:columns>
  45.     </mx:DataGrid>
  46.  
  47. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads