Flex中如何通过columnCount属性在TileList控件中设置一串数字列并且可以调整大小的例子

By Minidxer | August 8, 2008

接下来的例子演示了Flex中如何通过columnCount属性，在TileList控件中设置一串数字列并且可以调整大小。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. control-in-flex/ -->
  3. <mx:Application name="TileList_columnCount_test"
  4.         xmlns:mx="http://www.adobe.com/2006/mxml"
  5.         layout="vertical"
  6.         verticalAlign="middle"
  7.         backgroundColor="white">
  8.  
  9.     <mx:ArrayCollection id="arrColl">
  10.         <mx:source>
  11.             <mx:Array>
  12.                 <mx:Object label="One" />
  13.                 <mx:Object label="Two" />
  14.                 <mx:Object label="Three" />
  15.                 <mx:Object label="Four" />
  16.                 <mx:Object label="Five" />
  17.                 <mx:Object label="Six" />
  18.                 <mx:Object label="Seven" />
  19.                 <mx:Object label="Eight" />
  20.                 <mx:Object label="Nine" />
  21.                 <mx:Object label="Ten" />
  22.             </mx:Array>
  23.         </mx:source>
  24.     </mx:ArrayCollection>
  25.  
  26.     <mx:ApplicationControlBar dock="true">
  27.         <mx:Form styleName="plain">
  28.             <mx:FormItem label="columnCount:">
  29.                 <mx:HSlider id="slider"
  30.                         minimum="1"
  31.                         maximum="5"
  32.                         value="5"
  33.                         snapInterval="1"
  34.                         tickInterval="1"
  35.                         liveDragging="true" />
  36.             </mx:FormItem>
  37.         </mx:Form>
  38.     </mx:ApplicationControlBar>
  39.  
  40.     <mx:TileList id="tileList"
  41.             dataProvider="{arrColl}"
  42.             columnCount="{slider.value}"
  43.             columnWidth="100"
  44.             rowCount="2"
  45.             rowHeight="100"
  46.             verticalScrollPolicy="on" />
  47.  
  48. </mx:Application>
接下来是ActionScript实现同样功能的代码：
Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. control-in-flex/ -->
  3. <mx:Application name="TileList_columnCount_test"
  4.         xmlns:mx="http://www.adobe.com/2006/mxml"
  5.         layout="vertical"
  6.         verticalAlign="middle"
  7.         backgroundColor="white"
  8.         initialize="init();">
  9.  
  10.     <mx:Script>
  11.         <![CDATA[
  12.             import mx.collections.ArrayCollection;
  13.             import mx.containers.ApplicationControlBar;
  14.             import mx.containers.Form;
  15.             import mx.containers.FormItem;
  16.             import mx.controls.HSlider;
  17.             import mx.controls.TileList;
  18.             import mx.core.ScrollPolicy;
  19.             import mx.events.SliderEvent;
  20.  
  21.             private var arrColl:ArrayCollection;
  22.             private var slider:HSlider;
  23.             private var tileList:TileList;
  24.  
  25.             private function init():void {
  26.                 arrColl = new ArrayCollection();
  27.                 arrColl.addItem({label:"One"});
  28.                 arrColl.addItem({label:"Two"});
  29.                 arrColl.addItem({label:"Three"});
  30.                 arrColl.addItem({label:"Four"});
  31.                 arrColl.addItem({label:"Five"});
  32.                 arrColl.addItem({label:"Six"});
  33.                 arrColl.addItem({label:"Seven"});
  34.                 arrColl.addItem({label:"Eight"});
  35.                 arrColl.addItem({label:"Nine"});
  36.                 arrColl.addItem({label:"Ten"});
  37.  
  38.                 slider = new HSlider();
  39.                 slider.minimum = 1;
  40.                 slider.maximum = 5;
  41.                 slider.value = 5;
  42.                 slider.snapInterval = 1;
  43.                 slider.tickInterval = 1;
  44.                 slider.liveDragging = true;
  45.                 slider.addEventListener(SliderEvent.CHANGE, slider_change);
  46.  
  47.                 var formItem:FormItem = new FormItem();
  48.                 formItem.label = "columnCount:";
  49.                 formItem.addChild(slider);
  50.  
  51.                 var form:Form = new Form();
  52.                 form.styleName = "plain";
  53.                 form.addChild(formItem);
  54.  
  55.                 var appControlBar:ApplicationControlBar = new ApplicationControlBar();
  56.                 appControlBar.dock = true;
  57.                 appControlBar.addChild(form);
  58.                 Application.application.addChildAt(appControlBar, 0);
  59.  
  60.                 tileList = new TileList();
  61.                 tileList.dataProvider = arrColl;
  62.                 tileList.columnCount = 5;
  63.                 tileList.columnWidth = 100;
  64.                 tileList.rowCount = 2;
  65.                 tileList.rowHeight = 100;
  66.                 tileList.verticalScrollPolicy = ScrollPolicy.ON;
  67.                 addChild(tileList);
  68.             }
  69.  
  70.             private function slider_change(evt:SliderEvent):void {
  71.                 tileList.columnCount = evt.value;
  72.             }
  73.         ]]>
  74.     </mx:Script>
  75.  
  76. </mx:Application>

代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | 1 Comment » | Tags: ,

你可能还对下列文章感兴趣:

One comment | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll