弹出窗口的方式来添加新的数据到DataGrid中。

经常在Demo中会看到列表，表格等方式来显示数据。当然有时候也需要添加数据到这些列表或者表格中。有很多方式提交，这里展示一个弹出窗口的方式来添加新的数据到DataGrid中。例子展示：首先，我们开始建设一个基本的界面结构，一个带有“Notes标题的Panel,一个DataGrid，以及一个用于提交数据的按钮。Xml代码1.?xmlversion=1.0encoding=utf-8?2.mx:Application3.xmlns:mx==absolute5.width=500height=3006.mx:Paneltitle=Notes7.width=100%height=100%8.layout=verticalhorizontalAlign=right9.paddingTop=3paddingLeft=3paddingRight=3paddingBottom=310.mx:DataGridwidth=100%height=100%11.mx:columns12.mx:DataGridColumnheaderText=AuthordataField=authorwidth=80/13.mx:DataGridColumnheaderText=TopicdataField=topicwidth=100/14.mx:DataGridColumnheaderText=DescriptiondataField=description/15./mx:columns16./mx:DataGrid17.mx:Buttonlabel=AddNote/18./mx:Panel19./mx:Application这些代码看起来并不陌生，DataGrid三个列的数据对应我们Note类的三个属性，我们定义Note类如下：Xml代码1.package2.{3.publicclassNote4.{5.publicvarauthor:String;6.publicvartopic:String;7.publicvardescription:String;8.}9.}要真正使得我们的数据开始运转，我们还需要一个脚本块：需要一个数据结构来保存我们的Note信息。这里我们使用notes：ArrayCollection来记录我们要添加和已经添加的数据。这些数据能够在DataGrid中显示，是因为我们要把它设置成为DataGrid的provider.接下来我们先定义和初始化这个notes.Js代码1.mx:Script2.![CDATA[3.importmx.collections.ArrayCollection;4.5.[Bindable]6.privatevarnotes:ArrayCollection=newArrayCollection();7.]]8./mx:Script然后在把它设置成为datagrid的provider.Xml代码1.mx:DataGriddataProvider={notes}width=100%height=100%2.mx:columns3.mx:DataGridColumnheaderText=AuthordataField=authorwidth=80/4.mx:DataGridColumnheaderText=TopicdataField=topicwidth=100/5.mx:DataGridColumnheaderText=DescriptiondataField=description/6./mx:columns7./mx:DataGrid接下来，我们就要创建一个弹出的窗口，这里使用的是Flex组件TitleWindow.我们起名为AddNote.mxml.它将用于输入界面，通过它，可以输入与datagrid三列属性对应的数据。它还包含两个按钮：cancel和save.Xml代码1.?xmlversion=1.0encoding=utf-8?2.mx:TitleWindowxmlns:mx==absolutewidth=348height=2184.title=AddANote5.mx:Labeltext=Authorx=35y=10/6.mx:TextInputid=authorwidth=150x=84y=8/7.mx:Labeltext=Topicy=36x=42/8.mx:TextInputid=topicwidth=150x=84y=34/9.mx:Labeltext=Descriptiony=62x=10/10.mx:TextAreaid=descriptionwidth=234height=77x=84y=61/11.mx:Buttonlabel=Cancelx=193y=146/12.mx:Buttonlabel=Savex=264y=146/13./mx:TitleWindow好了，我们已经拥有一个可以作为数据输入的界面，我们还要在我们的主程序中设定在某个合适的时间初始化并且显示这个窗口，这个任务就交给了Application的creationcomplete事件。即在Application创建的时候执行：Xml代码1.mx:Application2.xmlns:mx==absolute4.width=500height=3005.creationComplete=init()在这个init()函数中，我们创建了AddNote的一个实例，并设置监听来自save按钮的saveNote事件Js代码1.privatevaraddNoteScreen:AddNote;2.3.privatefunctioninit():void4.{5.addNoteScreen=newAddNote();6.addNoteScreen.addEventListener(SaveNote,saveNote);7.}Xml代码1.mx:Buttonlabel=AddNoteclick=addNote()/当用户点击addNoe按钮的时候就要弹出刚才创建的窗口。这里我们使用PopManager来简单管理窗口的创建和关闭。Js代码1.privatefunctionaddNote():void2.{3.PopUpManager.addPopUp(addNoteScreen,this,true);4.PopUpManager.centerPopUp(addNoteScreen);5.addNoteScreen.author.text=;6.addNoteScreen.topic.text=;7.addNoteScreen.description.text=;8.}这里有两个方法，方法一addPopUp，就是弹出窗口，这里我们传输了三个参数，addNoteScreen为AddNote的一个实例，this为当前窗口，true为是否设是否只有弹出的窗口可被点击，即是否只有弹出的窗口处于Active状态。第二个方法，就是设置弹出窗口的位置。当窗口弹出来的时候，我们可以做两件事情，一提交保存用户输入数据，二是简单的关闭窗口。如果关闭窗口，我们也使用PopManager管理器：Js代码1.mx:Script2.![CDATA[3.importmx.managers.PopUpManager;4.5.privatefunctionclose():void6.{7.PopUpManager.removePopUp(this);8.}9.]]10./mx:ScriptXml代码1.mx:Buttonlabel=Cancelclick=close()x=193y=146/若要保存用户提交的数据，我们需要调度一个自定义的事件.我们使用Eventmetadatatag来创建我们的自定义事件，而这个metadata标记将在TitleWindow中创建。Java代码1.mx:Metadata2.[Event(name=SaveNote)]3./mx:Metadata要调度这个时间，我们必须和按钮save挂钩起来：Xml代码1.mx:Buttonlabel=Saveclick=save()x=264y=146/这个方法将添加到脚本中，这个方法就是简单调度SaveNoe事件：Js代码1.privatefunctionsave():void2.{3.this.dispatchEvent(newEvent(SaveNote));4.}下面是TitleWindow所有代码：Xml代码1.?xmlversion=1.0encoding=utf-8?2.mx:TitleWindowxmlns:mx==absolutewidth=348height=2184.title=AddANote5.mx:Metadata6.[Event(name=SaveNote)]7./mx:Metadata8.mx:Script9.![CDATA[10.importmx.managers.PopUpManager;11.12.privatefunctionclose():void13.{14.PopUpManager.removePopUp(this);15.}16.17.privatefunctionsave():void18.{19.this.dispatchEvent(newEvent(SaveNote));20.}21.]]22./mx:Script23.mx:Labeltext=Authorx=35y=10/24.mx:TextInputid=authorwidth=150x=84y=8/25.mx:Labeltext=Topicy=36x=42/26.mx:TextInputid=topicwidth=150x=84y=34/27.mx:Labeltext=Descriptiony=62x=10/28.mx:TextAreaid=descriptionwidth=234height=77x=84y=61/29.mx:Buttonlabel=Cancelclick=close()x=193y=146/30.mx:Buttonlabel=Saveclick=save()x=264y=146/31./mx:TitleWindow要把弹出窗口中用户输入的数据显示在Application中的datagrid中，其实也很简单，就是要数据绑定。前面的[Bindable]中的notes:ArrayCollecton就要与我们弹出窗口中的用户输入数据绑定起来。这个方法由save按钮触发后执行：Js代码1.privatefunctionsaveNote(e:Event):void2.{3.varnote:Note=newNote();4.note.author=addNoteScreen.author.text;5.note.topic=addNoteScreen.topic.text;6.note.description=addNoteScreen.description.text;7.notes.addItem(note);8.PopUpManager.removePopUp(addNoteScreen);9.}在绑定之后，即显示在Applicationdatagrid中之后，我们要把弹出的窗口关闭，即removePopUp。这里就是全部的介绍了，下面是A