《弹出窗口的方式来添加新的数据到DataGrd中。.docVIP

经常在Demo中会看到列表，表格等方式来显示数据。当然有时候也需要添加数据到这些列表或者表格中。有很多方式提交，这里展示一个弹出窗口的方式来添加新的数据到DataGrid中。 例子展示： 首先，我们开始建设一个基本的界面结构，一个带有“Notes标题的Panel,一个DataGrid，以及一个用于提交数据的按钮。 Xml代码 ?xml?version=1.0?encoding=utf-8??? mx:Application?? ?xmlns:mx=/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?? ?xml version=1.0 encoding=utf-8? mx:Application xmlns:mx=/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类如下： Xml代码 package ?? { ?? ??public?class?Note ?? ??{ ?? ????public?var?author:String; ?? ????public?var?topic:String; ?? ????public?var?description:String; ?? ??} ?? }?? package { public class Note { public var author:String; public var topic:String; public var description:String; } } ?要真正使得我们的数据开始运转，我们还需要一个脚本块：需要一个数据结构来保存我们的Note信息。这里我们使用notes：ArrayCollection来记录我们要添加和已经添加的数据。这些数据能够在DataGrid中显示，是因为我们要把它设置成为DataGrid的provider.接下来我们先定义和初始化这个notes. Js代码 mx:Script ?? ![CDATA[ ?? ?impor