Flex中如何利用rowCount属性使List控件Resize时特定的行被显示的例子

By Minidxer | October 30, 2008

接下来的例子演示了Flex中如何利用rowCount属性,使List控件Resize时特定的行被显示。

让我们先来看一下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="mlbXML" >
  8.         <teams>
  9.             <league id="AL">
  10.                 <team label="Baltimore Orioles" />
  11.                 <team label="Boston Red Sox" />
  12.                 <team label="Chicago White Sox" />
  13.                 <team label="Cleveland Indians" />
  14.                 <team label="Detroit Tigers" />
  15.                 <team label="Kansas City Royals" />
  16.                 <team label="Los Angeles Angels of Anaheim" />
  17.                 <team label="Minnesota Twins" />
  18.                 <team label="New York Yankees" />
  19.                 <team label="Oakland Athletics" />
  20.                 <team label="Seattle Mariners" />
  21.                 <team label="Tampa Bay Devil Rays" />
  22.                 <team label="Texas Rangers" />
  23.                 <team label="Toronto Blue Jays" />
  24.             </league>
  25.         </teams>
  26.     </mx:XML>
  27.  
  28.     <mx:XMLListCollection id="alTeams"
  29.             source="{mlbXML.league.(@id == 'AL').team}" />
  30.  
  31.     <mx:ApplicationControlBar dock="true">
  32.         <mx:Form>
  33.             <mx:FormItem label="rowCount:">
  34.                 <mx:HSlider id="slider"
  35.                         minimum="1"
  36.                         maximum="10"
  37.                         snapInterval="1"
  38.                         liveDragging="true"
  39.                         dataTipPrecision="0"
  40.                         change="list.rowCount = event.value;" />
  41.             </mx:FormItem>
  42.         </mx:Form>
  43.     </mx:ApplicationControlBar>
  44.  
  45.     <mx:VBox id="vBox" height="100%">
  46.         <mx:List id="list"
  47.                 maxHeight="{vBox.height}"
  48.                 dataProvider="{alTeams}"
  49.                 labelField="@label" />
  50.     </mx:VBox>
  51.  
  52. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: List | No Comments » | Tags: , , ,

Search Posts