經常在Demo中會看到列表，表格等方式來顯示數據。當然有時候也需要添加數據到這些列表或者表格中。有很多方式提交，這里展示一個彈出窗口的方式來添加新的數據到DataGrid中。

例子展示：

首先，我們開始建設一個基本的界面結構，一個帶有“Notes"標題的Panel,一個DataGrid，以及一個用于提交數據的按鈕。

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300"> <mx:Panel title="Notes" width="100%" height="100%" layout="vertical" horizontalAlign="right" paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3"> <mx:DataGrid width="100%" height="100%"> <mx:columns> <mx:DataGridColumn headerText="Author" dataField="author" width="80"/> <mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/> <mx:DataGridColumn headerText="Description" dataField="description"/> </mx:columns> </mx:DataGrid> <mx:Button label="Add Note"/> </mx:Panel> </mx:Application>

這些代碼看起來并不陌生，DataGrid三個列的數據對應我們Note類的三個屬性，我們定義Note類如下：

package { public class Note { public var author:String; public var topic:String; public var description:String; } }

要真正使得我們的數據開始運轉，我們還需要一個腳本塊：需要一個數據結構來保存我們的Note信息。這里我們使用notes：ArrayCollection來記錄我們要添加和已經添加的數據。這些數據能夠在DataGrid中顯示，是因為我們要把它設置成為DataGrid的provider.接下來我們先定義和初始化這個notes.

<mx:Script> <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var notes:ArrayCollection = new ArrayCollection(); ]]> </mx:Script>

然后在把它設置成為datagrid的provider.

<mx:DataGrid dataProvider="{notes}" width="100%" height="100%"> <mx:columns> <mx:DataGridColumn headerText="Author" dataField="author" width="80"/> <mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/> <mx:DataGridColumn headerText="Description" dataField="description"/> </mx:columns> </mx:DataGrid>

接下來，我們就要創建一個彈出的窗口，這里使用的是Flex組件TitleWindow.我們起名為AddNote.mxml.它將用于輸入界面，通過它，可以輸入與datagrid三列屬性對應的數據。它還包含兩個按鈕：cancel和save.

<?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="348" height="218" title="Add A Note"> <mx:Label text="Author" x="35" y="10"/> <mx:TextInput id="author" width="150" x="84" y="8"/> <mx:Label text="Topic" y="36" x="42"/> <mx:TextInput id="topic" width="150" x="84" y="34"/> <mx:Label text="Description" y="62" x="10"/> <mx:TextArea id="description" width="234" height="77" x="84" y="61"/> <mx:Button label="Cancel" x="193" y="146"/> <mx:Button label="Save" x="264" y="146"/> </mx:TitleWindow>

好了，我們已經擁有一個可以作為數據輸入的界面，我們還要在我們的主程序中設定在某個合適的時間初始化并且顯示這個窗口，這個任務就交給了Application的creation complete事件。即在Application 創建的時候執行：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300" creationComplete="init()">

在這個init()函數中，我們創建了AddNote的一個實例，并設置監聽來自save按鈕的saveNote事件

private var addNoteScreen:AddNote; private function init():void { addNoteScreen = new AddNote(); addNoteScreen.addEventListener("SaveNote", saveNote); }

<mx:Button label="Add Note" click="addNote()"/>

當用戶點擊addNoe按鈕的時候就要彈出剛才創建的窗口。這里我們使用PopManager來簡單管理窗口的創建和關閉。

private function addNote():void { PopUpManager.addPopUp(addNoteScreen, this, true); PopUpManager.centerPopUp(addNoteScreen); addNoteScreen.author.text = ""; addNoteScreen.topic.text = ""; addNoteScreen.description.text = ""; }

這里有兩個方法，方法一addPopUp，就是彈出窗口，這里我們傳輸了三個參數，addNoteScreen為AddNote的一個實例，this為當前窗口，true為是否設是否只有彈出的窗口可被點擊，即是否只有彈出的窗口處于Active狀態。第二個方法，就是設置彈出窗口的位置。

當窗口彈出來的時候，我們可以做兩件事情，一提交保存用戶輸入數據，二是簡單的關閉窗口。如果關閉窗口，我們也使用PopManager管理器：

<mx:Script> <![CDATA[ import mx.managers.PopUpManager; private function close():void { PopUpManager.removePopUp(this); } ]]> </mx:Script>

<mx:Button label="Cancel" click="close()" x="193" y="146"/>

若要保存用戶提交的數據，我們需要調度一個自定義的事件.我們使用Event metadata tag來創建我們的自定義事件，而這個<metadata>標記將在TitleWindow中創建。

<mx:Metadata> [Event(name="SaveNote")] </mx:Metadata>

要調度這個時間，我們必須和按鈕save掛鉤起來：

<mx:Button label="Save" click="save()" x="264" y="146"/>

這個方法將添加到腳本中，這個方法就是簡單調度SaveNoe事件：

private function save():void { this.dispatchEvent(new Event("SaveNote")); }

下面是TitleWindow所有代碼：

<?xml version="1.0" encoding="utf-8"?> <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="348" height="218" title="Add A Note"> <mx:Metadata> [Event(name="SaveNote")] </mx:Metadata> <mx:Script> <![CDATA[ import mx.managers.PopUpManager; private function close():void { PopUpManager.removePopUp(this); } private function save():void { this.dispatchEvent(new Event("SaveNote")); } ]]> </mx:Script> <mx:Label text="Author" x="35" y="10"/> <mx:TextInput id="author" width="150" x="84" y="8"/> <mx:Label text="Topic" y="36" x="42"/> <mx:TextInput id="topic" width="150" x="84" y="34"/> <mx:Label text="Description" y="62" x="10"/> <mx:TextArea id="description" width="234" height="77" x="84" y="61"/> <mx:Button label="Cancel" click="close()" x="193" y="146"/> <mx:Button label="Save" click="save()" x="264" y="146"/> </mx:TitleWindow

要把彈出窗口中用戶輸入的數據顯示在Application 中的datagrid中，其實也很簡單，就是要數據綁定。前面的[Bindable]中的notes:ArrayCollecton就要與我們彈出窗口中的用戶輸入數據綁定起來。這個方法由save按鈕觸發后執行：

private function saveNote(e:Event):void { var note:Note = new Note(); note.author = addNoteScreen.author.text; note.topic = addNoteScreen.topic.text; note.description = addNoteScreen.description.text; notes.addItem(note); PopUpManager.removePopUp(addNoteScreen); }

在綁定之后，即顯示在Application datagrid中之后，我們要把彈出的窗口關閉，即removePopUp。這里就是全部的介紹了，下面是Application的代碼：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300" creationComplete="init()"> <mx:Script> <![CDATA[ import mx.managers.PopUpManager; import mx.collections.ArrayCollection; [Bindable] private var notes:ArrayCollection = new ArrayCollection(); private var addNoteScreen:AddNote; private function init():void { addNoteScreen = new AddNote(); addNoteScreen.addEventListener("SaveNote", saveNote); } private function addNote():void { PopUpManager.addPopUp(addNoteScreen, this, true); PopUpManager.centerPopUp(addNoteScreen); addNoteScreen.author.text = ""; addNoteScreen.topic.text = ""; addNoteScreen.description.text = ""; } private function saveNote(e:Event):void { var note:Note = new Note(); note.author = addNoteScreen.author.text; note.topic = addNoteScreen.topic.text; note.description = addNoteScreen.description.text; notes.addItem(note); PopUpManager.removePopUp(addNoteScreen); } ]]> </mx:Script> <mx:Panel title="Notes" width="100%" height="100%" layout="vertical" horizontalAlign="right" paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3"> <mx:DataGrid dataProvider="{notes}" width="100%" height="100%"> <mx:columns> <mx:DataGridColumn headerText="Author" dataField="author" width="80"/> <mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/> <mx:DataGridColumn headerText="Description" dataField="description"/> </mx:columns> </mx:DataGrid> <mx:Button label="Add Note" click="addNote()"/> </mx:Panel> </mx:Application>

參考翻譯： http://www.switchonthecode.com/tutorials/flex-datagrid-adding-rows-using-a-popup

Flex使用彈出窗口為DataGrid添加新數據