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

例子展示：

首先，我們開始建設(shè)一個基本的界面結(jié)構(gòu)，一個帶有“Notes"標(biāo)題的Panel,一個DataGrid，以及一個用于提交數(shù)據(jù)的按鈕。

<?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三個列的數(shù)據(jù)對應(yīng)我們Note類的三個屬性，我們定義Note類如下：

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

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

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

然后在把它設(shè)置成為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>

接下來，我們就要創(chuàng)建一個彈出的窗口，這里使用的是Flex組件TitleWindow.我們起名為AddNote.mxml.它將用于輸入界面，通過它，可以輸入與datagrid三列屬性對應(yīng)的數(shù)據(jù)。它還包含兩個按鈕：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>

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

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

在這個init()函數(shù)中，我們創(chuàng)建了AddNote的一個實例，并設(shè)置監(jiān)聽來自save按鈕的saveNote事件

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

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

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

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

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

當(dāng)窗口彈出來的時候，我們可以做兩件事情，一提交保存用戶輸入數(shù)據(jù)，二是簡單的關(guān)閉窗口。如果關(guān)閉窗口，我們也使用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"/>

若要保存用戶提交的數(shù)據(jù)，我們需要調(diào)度一個自定義的事件.我們使用Event metadata tag來創(chuàng)建我們的自定義事件，而這個<metadata>標(biāo)記將在TitleWindow中創(chuàng)建。

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

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

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

這個方法將添加到腳本中，這個方法就是簡單調(diào)度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

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

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中之后，我們要把彈出的窗口關(guān)閉，即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添加新數(shù)據(jù)