Flex中如何将NumericStepper控件作为DataGrid控件的一个编辑项目的例子

和前面的 Flex中如何通过设置editable属性创建一个可编辑的DataGrid控件的例子很相似，接下来的例子演示了Flex中，如何通过设置 DataGrid控件和 DataGridColumn 对象的 itemEditor和editorDataField属性，将NumericStepper控件作为DataGrid控件的一个编辑项目。

让我们先来看一下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">
7.     <mx:ArrayCollection id="arrColl">
8.         <mx:source>
9.             <mx:Array>
10.                 <mx:Object label="Student A" score="8" />
11.                 <mx:Object label="Student B" score="4" />
12.                 <mx:Object label="Student C" score="7" />
13.                 <mx:Object label="Student D" score="8" />
14.                 <mx:Object label="Student E" score="2" />
15.                 <mx:Object label="Student F" score="6" />
16.                 <mx:Object label="Student G" score="7" />
17.                 <mx:Object label="Student H" score="7" />
18.                 <mx:Object label="Student I" score="9" />
19.                 <mx:Object label="Student J" score="8" />
20.                 <mx:Object label="Student K" score="4" />
21.                 <mx:Object label="Student L" score="7" />
22.             </mx:Array>
23.         </mx:source>
24.     </mx:ArrayCollection>
26.     <mx:DataGrid id="dataGrid"
27.             dataProvider="{arrColl}"
28.             editable="true"
29.             rowCount="8">
30.         <mx:columns>
31.             <mx:DataGridColumn dataField="label"
32.                     editable="false" />
33.             <mx:DataGridColumn dataField="score"
34.                     editable="true"
35.                     itemEditor="mx.controls.NumericStepper"
36.                     editorDataField="value" />
37.         </mx:columns>
38.     </mx:DataGrid>
40. </mx:Application>