Flex使用弹出窗口为DataGrid添加新数据
2011-10-14 13:55
513 查看
经常在Demo中会看到列表,表格等方式来显示数据。当然有时候也需要添加数据到这些列表或者表格中。有很多方式提交,这里展示一个弹出窗口的方式来添加新的数据到DataGrid中。
例子展示:
首先,我们开始建设一个基本的界面结构,一个带有“Notes"标题的Panel,一个DataGrid,以及一个用于提交数据的按钮。
Xml代码
这些代码看起来并不陌生,DataGrid三个列的数据对应我们Note类的三个属性,我们定义Note类如下:
Xml代码
要真正使得我们的数据开始运转,我们还需要一个脚本块:需要一个数据结构来保存我们的Note信息。这里我们使用notes:ArrayCollection来记录我们要添加和已经添加的数据。这些数据能够在DataGrid中显示,是因为我们要把它设置成为DataGrid的provider.接下来我们先定义和初始化这个notes.
Js代码
然后在把它设置成为datagrid的provider.
Xml代码
接下来,我们就要创建一个弹出的窗口,这里使用的是Flex组件TitleWindow.我们起名为AddNote.mxml.它将用于输入界面,通过它,可以输入与datagrid三列属性对应的数据。它还包含两个按钮:cancel和save.
Xml代码
好了,我们已经拥有一个可以作为数据输入的界面,我们还要在我们的主程序中设定在某个合适的时间初始化并且显示这个窗口,这个任务就交给了Application的creation complete事件。即在Application 创建的时候执行:
Xml代码
在这个init()函数中,我们创建了AddNote的一个实例,并设置监听来自save按钮的saveNote事件
Js代码
Xml代码
当用户点击addNoe按钮的时候就要弹出刚才创建的窗口。这里我们使用PopManager来简单管理窗口的创建和关闭。
Js代码
这里有两个方法,方法一addPopUp,就是弹出窗口,这里我们传输了三个参数,addNoteScreen为AddNote的一个实例,this为当前窗口,true为是否设是否只有弹出的窗口可被点击,即是否只有弹出的窗口处于Active状态。第二个方法,就是设置弹出窗口的位置。
当窗口弹出来的时候,我们可以做两件事情,一提交保存用户输入数据,二是简单的关闭窗口。如果关闭窗口,我们也使用PopManager管理器:
Js代码
Xml代码
若要保存用户提交的数据,我们需要调度一个自定义的事件.我们使用Event metadata tag来创建我们的自定义事件,而这个<metadata>标记将在TitleWindow中创建。
Java代码
要调度这个时间,我们必须和按钮save挂钩起来:
Xml代码
这个方法将添加到脚本中,这个方法就是简单调度SaveNoe事件:
Js代码
下面是TitleWindow所有代码:
Xml代码
要把弹出窗口中用户输入的数据显示在Application 中的datagrid中,其实也很简单,就是要数据绑定。前面的[Bindable]中的notes:ArrayCollecton就要与我们弹出窗口中的用户输入数据绑定起来。这个方法由save按钮触发后执行:
Js代码
在绑定之后,即显示在Application datagrid中之后,我们要把弹出的窗口关闭,即removePopUp。这里就是全部的介绍了,下面是Application的代码:
Xml代码
例子展示:
首先,我们开始建设一个基本的界面结构,一个带有“Notes"标题的Panel,一个DataGrid,以及一个用于提交数据的按钮。
Xml代码
<?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类如下:
Xml代码
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[ import mx.collections.ArrayCollection; [Bindable] private var notes:ArrayCollection = new ArrayCollection(); ]]> </mx:Script>
然后在把它设置成为datagrid的provider.
Xml代码
<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代码
<?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 创建的时候执行:
Xml代码
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="300" creationComplete="init()">
在这个init()函数中,我们创建了AddNote的一个实例,并设置监听来自save按钮的saveNote事件
Js代码
private var addNoteScreen:AddNote; private function init():void { addNoteScreen = new AddNote(); addNoteScreen.addEventListener("SaveNote", saveNote); }
Xml代码
<mx:Button label="Add Note" click="addNote()"/>
当用户点击addNoe按钮的时候就要弹出刚才创建的窗口。这里我们使用PopManager来简单管理窗口的创建和关闭。
Js代码
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管理器:
Js代码
<mx:Script> <![CDATA[ import mx.managers.PopUpManager; private function close():void { PopUpManager.removePopUp(this); } ]]> </mx:Script>
Xml代码
<mx:Button label="Cancel" click="close()" x="193" y="146"/>
若要保存用户提交的数据,我们需要调度一个自定义的事件.我们使用Event metadata tag来创建我们的自定义事件,而这个<metadata>标记将在TitleWindow中创建。
Java代码
<mx:Metadata> [Event(name="SaveNote")] </mx:Metadata>
要调度这个时间,我们必须和按钮save挂钩起来:
Xml代码
<mx:Button label="Save" click="save()" x="264" y="146"/>
这个方法将添加到脚本中,这个方法就是简单调度SaveNoe事件:
Js代码
private function save():void { this.dispatchEvent(new Event("SaveNote")); }
下面是TitleWindow所有代码:
Xml代码
<?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按钮触发后执行:
Js代码
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代码
1.<?xml version="1.0" encoding="utf-8"?> 2.<mx:Application 3. xmlns:mx="http://www.adobe.com/2006/mxml" 4. layout="absolute" 5. width="500" height="300" 6. creationComplete="init()"> 7. <mx:Script> 8. <![CDATA[ 9. import mx.managers.PopUpManager; 10. import mx.collections.ArrayCollection; 11. 12. [Bindable] 13. private var notes:ArrayCollection = new ArrayCollection(); 14. 15. private var addNoteScreen:AddNote; 16. 17. private function init():void 18. { 19. addNoteScreen = new AddNote(); 20. addNoteScreen.addEventListener("SaveNote", saveNote); 21. } 22. 23. private function addNote():void 24. { 25. PopUpManager.addPopUp(addNoteScreen, this, true); 26. PopUpManager.centerPopUp(addNoteScreen); 27. addNoteScreen.author.text = ""; 28. addNoteScreen.topic.text = ""; 29. addNoteScreen.description.text = ""; 30. } 31. 32. private function saveNote(e:Event):void 33. { 34. var note:Note = new Note(); 35. note.author = addNoteScreen.author.text; 36. note.topic = addNoteScreen.topic.text; 37. note.description = addNoteScreen.description.text; 38. notes.addItem(note); 39. PopUpManager.removePopUp(addNoteScreen); 40. } 41. ]]> 42. </mx:Script> 43. <mx:Panel title="Notes" 44. width="100%" height="100%" 45. layout="vertical" horizontalAlign="right" 46. paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3"> 47. <mx:DataGrid dataProvider="{notes}" width="100%" height="100%"> 48. <mx:columns> 49. <mx:DataGridColumn headerText="Author" dataField="author" width="80"/> 50. <mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/> 51. <mx:DataGridColumn headerText="Description" dataField="description"/> 52. </mx:columns> 53. </mx:DataGrid> 54. <mx:Button label="Add Note" click="addNote()"/> 55. </mx:Panel> 56.</mx:Application>
相关文章推荐
- Flex利用自定义事件使用弹出窗口为DataGrid添加新数据
- Flex使用弹出窗口为DataGrid添加新数据
- Flex使用弹出窗口为DataGrid添加新数据
- Flex使用弹出窗口为DataGrid添加新数据
- Flex弹出式窗口为datagrid添加数据
- [转]使用showModalDialog打开模态窗口添加数据后刷新原窗口
- Flex 弹出窗口--datagrid--自定以事件
- Flex使用Blazeds与Java交互及自定义对象转换详解-DATAGRID读取ORACLE数据
- 添加数据成功后弹出窗口信息
- ASP.NET DATAGRID中如何点击整列或模板列后弹出窗口并选中新窗口数据将值返回给模板列中的文本框
- VC DataGrid使用问题,在其它电脑上,应用数据程序弹出“未成功配置,应用程序无法启动”
- vue中使用splice()删除数组中的一个数据 弹出窗口提示。
- 使用js弹出模态窗口,提交保存数据后关闭模态窗口,刷新父窗口
- detailview按钮列 点击弹出窗口中使用datagrid
- bootstrap使用(弹窗实现/弹出窗口数据不更新)
- easyui tree datagrid动态添加表头和表格数据,动态弹出框,修改和删除按钮
- Web开发技巧:使用自定义数据属性创建弹出窗口
- Flex使用Popupmanager弹出窗口的交互传值方法
- 使用showModalDialog打开模态窗口添加数据后刷新原窗口
- 使用MYSQL、PHP和FLEX实现上传图片,动态在DataGrid中添加下载按钮和上传的图片.