Flex 3快速入门: 构建高级用户界面 创建项目编辑器2

自定义条目编辑器最简单的方式是使用Drop-in条目编辑器。Drop-in条目编辑器是一个Flex组件。基于list的控件，比如 List,Tree,ComboBox或者DataGrid，的itemEditor属性可以指定Drop-in条目编辑器。例如，可以使用 Numericstepper控件来编辑DataGrid控件的一个字段。

要把一个组件作为Drop-in条目编辑器，这个空间必须实现IDropInListItemRenderer接口。实现 IDropInListItemRenderer接口的控件有：Button, CheckBox, DateField, Image, Label, NumericStepper, Text, TextArea, and TextInput.这些控件可以直接作为条目编辑器或条目渲染器使用。

你可以自定义组件作为条目编辑器。唯一的要求是自定义组件也实现了IDropInListItemRenderer接口。

在下边的例子中,使用NumericStepper控件，作为DateGrid控件一个字段的条目编辑器，这样用户就可以方便的修改数量字段。单击单元格可以激活Quantiy列的条目编辑器。这个例子还是用了Image控件作为条目渲染器来显示艺术品的缩略图。

注意:此例中，使用DataGridColumn 对象的editorXOffset, editorYOffset, editorWidthOffset and editorHeightOffset属性来定义NumericStepper 在单元格中的大小和位置。

例子

Data model (artwork.xml)

<artwork> <piece> <name>The Wall</name> <image>artwork1.jpg</image> <price>250</price> <quantity>5</quantity> </piece> <piece> <name>Blue Flake</name> <image>artwork5.jpg</image> <price>400</price> <quantity>2</quantity> </piece> <piece> <name>Butterfly</name> <image>artwork6.jpg</image> <price>375</price> <quantity>17</quantity> </piece> </artwork>

MXML files

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/ItemEditorDropIn/index.html" width="470" height="340" > <mx:Model id="artwork" source="model/artwork.xml"/> <mx:DataGrid id="artGrid" rowCount="10" variableRowHeight="true" dataProvider="{artwork.piece}" editable="true" > <mx:columns> <!-- Drop-in item renderer: Image control --> <mx:DataGridColumn dataField="image" headerText="Image" itemRenderer="mx.controls.Image" /> <mx:DataGridColumn headerText="Name" dataField="name"/> <mx:DataGridColumn headerText="Price" dataField="price"/> <!-- Drop-in item editor: NumericStepper control --> <mx:DataGridColumn headerText="Quantity" dataField="quantity" itemEditor="mx.controls.NumericStepper" editorDataField="value" editorXOffset="22" editorYOffset="25" editorWidthOffset="-40" editorHeightOffset="-50" /> </mx:columns> </mx:DataGrid> <mx:LinkButton textAlign="center" label="Photos (c) 2006 geishaboy500 (CC Attribution License)" click="{navigateToURL(new URLRequest('http://www.flickr.com/photos/geishaboy500/'));}" /> <mx:Script> <!--[CDATA[ import flash.net.navigateToURL; ]]--> </mx:Script> </mx:Application>