Flex中利用Repeater显示一组CheckBox控件的例子

By Minidxer | May 29, 2008

和前面Flex中利用Repeater显示一组RadioButton控件的例子非常类似的，接下来的例子中演示了Flex中如何Repeater作为一个数据提供源，用来显示一组CheckBox控件。

让我们先来看一下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:Script>
  8.         <![CDATA[
  9.             import mx.controls.Alert;
  10.             import mx.controls.CheckBox;
  11.  
  12.             private function button_click(evt:Event):void {
  13.                 var selArr:Array = [];
  14.                 var idx:int;
  15.                 var len:int = arr.length;
  16.                 for (idx=0; idx<len; idx++) {
  17.                     if (checkBox[idx].selected) {
  18.                         selArr.push(checkBox[idx].label);
  19.                     }
  20.                 }
  21.  
  22.                 var title:String = selArr.length + " of " + len + " item(s) selected.";
  23.                 var message:String = selArr.join("n");
  24.                 Alert.show(message, title);
  25.             }
  26.  
  27.             private function doFilter(element:*, index:int, arr:Array):Boolean {
  28.                 return element.selected;
  29.             }
  30.  
  31.             private function checkBox_change(evt:Event):void {
  32.                 var ch:CheckBox = evt.currentTarget as CheckBox;
  33.                 Alert.show(ch.getRepeaterItem().data);
  34.             }
  35.         ]]>
  36.     </mx:Script>
  37.  
  38.     <mx:Array id="arr">
  39.         <mx:Object label="Red" data="red" />
  40.         <mx:Object label="Orange" data="haloOrange" />
  41.         <mx:Object label="Yellow" data="yellow" />
  42.         <mx:Object label="Green" data="haloGreen" />
  43.         <mx:Object label="Blue" data="haloBlue" />
  44.     </mx:Array>
  45.  
  46.     <mx:Panel id="panel" width="50%" paddingLeft="10" verticalGap="10">
  47.         <mx:Repeater id="checkBoxRepeater" dataProvider="{arr}">
  48.             <mx:CheckBox id="checkBox"
  49.                     label="{checkBoxRepeater.currentItem.label}"
  50.                     data="{checkBoxRepeater.currentItem.data}"
  51.                     change="checkBox_change(event);" />
  52.         </mx:Repeater>
  53.         <mx:ControlBar horizontalAlign="right">
  54.             <mx:Button id="button"
  55.                     label="Click me"
  56.                     emphasized="true"
  57.                     click="button_click(event);" />
  58.         </mx:ControlBar>
  59.     </mx:Panel>
  60.  
  61. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

Topics: Flex | 4 Comments » | 306 views Tags: , ,

Related Post

4 comments | Add One

  1. auzn - 05/30/2008 at 9:01 am

    好 :)

  2. Minidxer - 05/30/2008 at 11:20 am

    @auzn
    好久没见你，最近很忙吧？

  3. auzn - 05/30/2008 at 3:42 pm

    @Minidxer:
    呵呵,有点儿,不过那个皮肤的还在写,就是觉得有些写跑题了,变成制作皮肤常用方法举例了 -_-!

  4. Minidxer - 05/30/2008 at 3:45 pm

    能从一个皮肤制作扩展到 制作皮肤常用方法举例 那不是更精彩吗？呵呵，期待期待~~~~

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll