May 10

Flex中如何将HSlider控件作为DataGrid列中的一个项目的例子

FlexAdd comments

前面我们了解了HSlider格式化显示控件上的数据以及滑标控件HSlider中如何通过tickThickness样式设置标尺厚度/宽度，所以对于HSlider这个控件并不陌生，而DataGrid就更多了。

接下来的例子，演示了如何将HSlider控件作为DataGrid列中的一个项目显示。

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


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

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/05/09/using-a-slider-control-as-a-datagrid-column-item-renderer-in-flex/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:ArrayCollection id="arrColl">
  9.         <mx:source>
  10.             <mx:Array>
  11.                 <mx:Object label="Student A" score="85" />
  12.                 <mx:Object label="Student B" score="48" />
  13.                 <mx:Object label="Student C" score="71" />
  14.                 <mx:Object label="Student D" score="88" />
  15.                 <mx:Object label="Student E" score="24" />
  16.                 <mx:Object label="Student F" score="64" />
  17.                 <mx:Object label="Student G" score="76" />
  18.                 <mx:Object label="Student H" score="76" />
  19.                 <mx:Object label="Student I" score="93" />
  20.                 <mx:Object label="Student J" score="88" />
  21.                 <mx:Object label="Student K" score="48" />
  22.                 <mx:Object label="Student L" score="76" />
  23.             </mx:Array>
  24.         </mx:source>
  25.     </mx:ArrayCollection>
  26.  
  27.     <mx:DataGrid id="dataGrid"
  28.             dataProvider="{arrColl}"
  29.             selectable="false"
  30.             rowCount="6"
  31.             width="500">
  32.         <mx:columns>
  33.             <mx:DataGridColumn dataField="label" />
  34.             <mx:DataGridColumn dataField="score" />
  35.             <mx:DataGridColumn dataField="score">
  36.                 <mx:itemRenderer>
  37.                     <mx:Component>
  38.                         <mx:HBox horizontalScrollPolicy="off"
  39.                                 verticalScrollPolicy="off">
  40.                             <mx:Script>
  41.                                 <![CDATA[
  42.                                     import mx.events.SliderEvent;
  43.  
  44.                                     private function slider_change(evt:SliderEvent):void {
  45.                                         data.score = evt.value;
  46.                                         outerDocument.arrColl.refresh();
  47.                                     }
  48.                                 ]]>
  49.                             </mx:Script>
  50.  
  51.                             <mx:HSlider minimum="0"
  52.                                     maximum="100"
  53.                                     value="{data.score}"
  54.                                     liveDragging="true"
  55.                                     snapInterval="1"
  56.                                     width="100%"
  57.                                     change="slider_change(event);" />
  58.                         </mx:HBox>
  59.                     </mx:Component>
  60.                 </mx:itemRenderer>
  61.             </mx:DataGridColumn>
  62.         </mx:columns>
  63.     </mx:DataGrid>
  64.  
  65. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：minidxer

written by Minidxer  |  tags: , , , ,

Related Post

One Response to “Flex中如何将HSlider控件作为DataGrid列中的一个项目的例子”

Trackbacks

Leave a Reply