flex_可编辑表格示例;

=>TheEditableGridItemEditor(自定义组件)

<?xml version="1.0" encoding="utf-8"?>

<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

import mx.events.ListEvent;

[Bindable]

private var arrayForCombo:ArrayCollection = new ArrayCollection([

{type: "军阀"},

{type: "雇佣兵"}

]);

[Bindable]

public var personType:String; // 应该用于存储修改了的值。

private function init():void

{

personType = data.type; // data为datagrid行信息；

for(var i:int=0, len:int=arrayForCombo.length; i<len; i++) {

if(arrayForCombo[i].type == data.type) {

combo.selectedIndex = i; // 让combobox显示对应的数据。

}

}

}

protected function combo_changeHandler(event:ListEvent):void

{

personType = combo.selectedItem.type;

}

]]>

</fx:Script>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

</fx:Declarations>

<!--view-->

<mx:ComboBox id="combo" dataProvider="{arrayForCombo}" labelField="type" change="combo_changeHandler(event)"/>

</mx:HBox>

=>TheEditableGrid(应用程序)

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="955" minHeight="600" pageTitle="可编辑表格示例">

<fx:Script>

<![CDATA[

import mx.collections.ArrayCollection;

[Bindable]

private var arrayForGrid:ArrayCollection = new ArrayCollection([

{name: "唐龙", age: 23, email: "23@lf.com", type: "军阀"},

{name: "楚源", age: 11, email: "11@lf.com", type: "雇佣兵"},

{name: "猴子", age: 12, email: "12!lf.com", type: "雇佣兵"}

]);

]]>

</fx:Script>

<fx:Declarations>

<!-- 将非可视元素（例如服务、值对象）放在此处 -->

</fx:Declarations>

<!--view-->

<mx:DataGrid id="dgrid" dataProvider="{arrayForGrid}" editable="true" width="350" height="120"

verticalCenter="0" horizontalCenter="0">

<mx:columns>

<mx:DataGridColumn headerText="姓名" dataField="name"/>

<mx:DataGridColumn headerText="年龄" dataField="age"/>

<mx:DataGridColumn headerText="邮箱地址" dataField="email" editable="false"/>

<mx:DataGridColumn headerText="身份" dataField="type" editorDataField="personType"

itemEditor="TheEditableGridItemEditor"/>

</mx:columns>

</mx:DataGrid>

</s:Application>