条目编辑器使你可以修改列表空间中每一个小单元的值。DataGrid,List和Tree空间支持条目编辑器。
连接：Adobe® Flex™也支持条目渲染器——制定组件如何显sdfs示数据。更多的信息请查看快速入门指南中的Using item renderers
DataGrid,List和Tree控件包含editable属性。如果把这个属性设置为true，那么用户就可以编辑这个控件的内容。默认情况下，editable属性等于false，这意味着你将不能编辑单元格
有很多种途径创建和使用列表编辑器：
使用默认列表编辑器
使用drop in 列表编辑器
创建内联列表编辑器
创建可重用的列表编辑器
使用一个组件作为列表编辑器
使用默认列表编辑器
默认的，Flex认为列表编辑器向列表控件返回单一的值。你可以使用列表控件的editorDataField 属性来指定一个包含新值的列表编辑器的属性。Flex会把值转换成适当的数据类型。
默认的列表编辑器是TextInput控件。所以editorDataField 的默认值是text,相当与TextInput控件的text属性。
下边的例子包含一个editable属性被置为true的DataGrid控件。这个例子没有使用自定义的列表编辑器，所以DataGrid控件使用了默认的列表编辑器。通过单击后显示的TextInput控件，你可以在每个字段内修改值
提示：对于DataGrid控件，把editable属性的值置为true可以使网格中的所有列处于可编辑状态。也可以设置DataGridColumn的editable属性为false，从而是任何一个列处于不可编辑状态
例子
数据模型(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 文件
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="" viewSourceURL="src/ItemEditorDefault/index.html"width="450" height="140"
> <mx:Model id="artwork" source="model/artwork.xml"/><mx:DataGrid
rowCount="4" dataProvider="{artwork.piece}" editable="true" /></mx:Application>
使用Drop-in条目编辑器自定义条目编辑器最简单的方式是使用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=""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>
创建内联条目编辑器Drop-in条目编辑器使用起来非常简单。但有主要缺点是你不能配置。通过<mx:Component>标签，可以创建一个组件作为内联条目编辑器。从而可以避免这个问题，是条目编辑器更灵活。
在下边的例子中，创建了一个包含NumericStepper控件的内联编辑器。因为此例中使用了内联编辑器，所以，可以设置NumericStepper的maximum和stepSize属性。
例子
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 file
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=""viewSourceURL="src/ItemEditorInline/index.html"
width="525" height="525" > <mx:Model id="artwork" source="model/artwork.xml"/><mx:DataGrid rowCount="3" variableRowHeight="true" dataProvider="{artwork.piece}" editable="true"
>
<mx:columns> <!-- Inline item renderer: Image control --> <mx:DataGridColumn dataField="image" headerText="Image" width="150">
<mx:itemRenderer> <mx:Component> <mx:VBox width="100%" height="140"horizontalAlign="center" verticalAlign="middle"
> <mx:Image source="{'assets/'+data.image}"/><mx:Label text="{data.image}" />
</mx:VBox> </mx:Component> </mx:itemRenderer></mx:DataGridColumn>
<mx:DataGridColumn headerText="Name" dataField="name"/> <mx:DataGridColumn headerText="Price" dataField="price"/><!-- Inline item editor: NumericStepper -->
<mx:DataGridColumn headerText="Quantity" dataField="quantity" editorDataField="value">
<mx:itemEditor> <mx:Component> <mx:NumericStepper maximum="100" stepSize="10"/>
</mx:Component> </mx:itemEditor> </mx:DataGridColumn></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>
创建一个可重用的内联条目编辑器在应用程序中，可以定义可重用的条目编辑器在多处使用。使用设置了id属性的<mx:Component>标记，可以创建可重用的内联条目编辑器，绑定组件的itemEditor属性到id属性就可以使用了。
通过把可重用的内联条目编辑器统一放到程序中的一个位置，可以提交程序的可维护性。即使你没有多次使用条目编辑器。
此例中，使用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 file <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx=""viewSourceURL="src/ItemEditorReusable/index.html"
width="525" height="525" > <mx:Model id="artwork" source="model/artwork.xml"/><!-- Reusable inline item editor -->
<mx:Component id="NumericStepEditor"> <mx:NumericStepper maximum="100" stepSize="10"/>
</mx:Component><!-- Reusable inline item renderer -->
<mx:Component id="ImageRenderer"><mx:VBox
width="100%" height="140" horizontalAlign="center" verticalAlign="middle" ><mx:Image source="{'assets/'+data.image}"/>
<mx:Label text="{data.image}"/></mx:VBox>
</mx:Component><mx:DataGrid rowCount="3" variableRowHeight="true" dataProvider="{artwork.piece}"
editable="true"
><mx:columns>
<mx:DataGridColumn dataField="image" headerText="Image" width="150"itemRenderer="{
ImageRenderer}" /> <mx:DataGridColumn headerText="Name" dataField="name"/><mx:DataGridColumn headerText="Price" dataField="price"/>
<mx:DataGridColumn headerText="Quantity" dataField="quantity"itemEditor="{NumericStepEditor}"
editorDataField="value" > </mx:DataGridColumn> </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>
使用组件作为条目编辑器通过创建多个小且封装良好的块，可以提高程序的可维护和可扩展性。在Flex中，通过自定义组件可以遵循这一标准流程。
自定义组件的方式之一是使用mxml文件。在一个自定义组件的mxml文档中，更标签必须是Application以外的其他Flex组件。 在下边的例子中，抽取包含Image和Label控件的条目渲染器和包含NumericStepper控件的条目编辑器到mxml文档中，作为自定义组件。 使用条目渲染器的方法是指定它的文件名作为itemRenderer属性的值。类似地，指定条目编辑器的文件名作为itemEditor属性的值。提示：使用可重用的内联条目编辑器的时候，使用数据绑定把控件绑定到条目渲染器上。当你使用一个组件作为条目编辑器的时候，就不必使用数据绑定了。而是使用自定义组件的名字作为条目编辑器。
例子 NumericStepEditor component
<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="" horizontalAlign="center" verticalAlign="middle">
<mx:Script> <![CDATA[ // Expose the editor's value public function get newQuantity ():uint {return myStepper.value;
} ]]> </mx:Script><mx:NumericStepper
id="myStepper" maximum="100" stepSize="1"value="{data.quantity}"
/> </mx:VBox>ImageRenderer component <?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="" horizontalAlign="center" verticalAlign="middle"
width="100%" height="140"
> <mx:Image source="{'assets/'+data.image}"/><mx:Label text="{data.image}"/>
</mx:VBox>
Main application file
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="" viewSourceURL="src/ItemEditorComponent/index.html"
width="525" height="525"
> <mx:Model id="artwork" source="model/artwork.xml"/><mx:DataGrid
rowCount="3" variableRowHeight="true" dataProvider="{artwork.piece}" editable="true">
<mx:columns> <!-- Use the ImageRenderer custom component as an item renderer --> <mx:DataGridColumn dataField="image" headerText="Image" width="150"itemRenderer="ImageRenderer"
/> <mx:DataGridColumn headerText="Name" dataField="name"/><mx:DataGridColumn headerText="Price" dataField="price"/>
<!--
Use the NumericStepRenderer custom component as an item renderer. --> <mx:DataGridColumn headerText="Quantity" dataField="quantity"itemEditor="NumericStepEditor"
editorDataField="newQuantity" > </mx:DataGridColumn> </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>