Flex中如何利用allowMultipleSelection和allowDisjointSelection属性设置DateChooser是否允许多项选择以及可连续/可中断选择的例子

By Minidxer | January 11, 2009

接下来的例子演示了Flex中如何利用allowMultipleSelection和allowDisjointSelection属性,设置DateChooser是否允许多项选择以及可连续/可中断选择。

让我们先来看一下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.dataGridClasses.DataGridColumn;
  10.  
  11.             private function date_labelFunc(item:Object, col:DataGridColumn):String {
  12.                 var date:Date = item[col.dataField];
  13.                 return date.toDateString();
  14.             }
  15.         ]]>
  16.     </mx:Script>
  17.  
  18.     <mx:ApplicationControlBar dock="true">
  19.         <mx:Form styleName="plain">
  20.             <mx:FormItem label="allowMultipleSelection:">
  21.                 <mx:CheckBox id="multiple" selected="true" />
  22.             </mx:FormItem>
  23.             <mx:FormItem label="allowDisjointSelection:">
  24.                 <mx:CheckBox id="disjoint" selected="true" />
  25.             </mx:FormItem>
  26.         </mx:Form>
  27.     </mx:ApplicationControlBar>
  28.  
  29.     <mx:HBox>
  30.         <mx:DateChooser id="dateChooser"
  31.                 allowMultipleSelection="{multiple.selected}"
  32.                 allowDisjointSelection="{disjoint.selected}" />
  33.         <mx:DataGrid id="dataGrid"
  34.                 dataProvider="{dateChooser.selectedRanges}"
  35.                 width="300"
  36.                 height="100%">
  37.             <mx:columns>
  38.                 <mx:DataGridColumn dataField="rangeStart"
  39.                         labelFunction="date_labelFunc" />
  40.                 <mx:DataGridColumn dataField="rangeEnd"
  41.                         labelFunction="date_labelFunc" />
  42.             </mx:columns>
  43.         </mx:DataGrid>
  44.     </mx:HBox>
  45.  
  46. </mx:Application>
代码:Peter deHaan 翻译/整理/编译:中文Flex例子

Topics: DateChooser | No Comments » | 682 views Tags: , , ,

Search Posts