您现在的位置： 365建站网 > 365文章 > Flex使用弹出窗口为DataGrid添加新数据

Flex使用弹出窗口为DataGrid添加新数据

文章来源：365jz.com     点击数：2986    更新时间：2009-12-02 21:17   参与评论

经常在Demo中会看到列表，表格等方式来显示数据。当然有时候也需要添加数据到这些列表或者表格中。有很多方式提交，这里展示一个弹出窗口的方式来添加新的数据到DataGrid中。

例子展示：

首先，我们开始建设一个基本的界面结构，一个带有“Notes"标题的Panel,一个DataGrid，以及一个用于提交数据的按钮。

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.   <mx:Panel title="Notes"  
  7.    width="100%" height="100%"  
  8.    layout="vertical" horizontalAlign="right"  
  9.    paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3">  
  10.     <mx:DataGrid width="100%" height="100%">  
  11.       <mx:columns>  
  12.         <mx:DataGridColumn headerText="Author" dataField="author" width="80"/>  
  13.         <mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/>  
  14.         <mx:DataGridColumn headerText="Description" dataField="description"/>  
  15.       </mx:columns>  
  16.     </mx:DataGrid>  
  17.     <mx:Button label="Add Note"/>  
  18.   </mx:Panel>  
  19. </mx:Application>  

 这些代码看起来并不陌生，DataGrid三个列的数据对应我们Note类的三个属性，我们定义Note类如下：

Xml代码 复制代码
  1. package   
  2. {   
  3.   public class Note   
  4.   {   
  5.     public var author:String;   
  6.     public var topic:String;   
  7.     public var description:String;   
  8.   }   
  9. }  

 要真正使得我们的数据开始运转，我们还需要一个脚本块：需要一个数据结构来保存我们的Note信息。这里我们使用notes：ArrayCollection来记录我们要添加和已经添加的数据。这些数据能够在DataGrid中显示，是因为我们要把它设置成为DataGrid的provider.接下来我们先定义和初始化这个notes.

Js代码 复制代码
  1. <mx:Script>   
  2. <![CDATA[   
  3.  import mx.collections.ArrayCollection;   
  4.     
  5.  [Bindable]   
  6.  private var notes:ArrayCollection = new ArrayCollection();   
  7. ]]>   
  8. </mx:Script>  

  然后在把它设置成为datagrid的provider.

Xml代码 复制代码
  1. <mx:DataGrid dataProvider="{notes}" width="100%" height="100%">  
  2.   <mx:columns>  
  3.     <mx:DataGridColumn headerText="Author" dataField="author" width="80"/>  
  4.     <mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/>  
  5.     <mx:DataGridColumn headerText="Description" dataField="description"/>  
  6.   </mx:columns>  
  7. </mx:DataGrid>  

 接下来，我们就要创建一个弹出的窗口，这里使用的是Flex组件TitleWindow.我们起名为AddNote.mxml.它将用于输入界面，通过它，可以输入与datagrid三列属性对应的数据。它还包含两个按钮：cancel和save.

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

 好了，我们已经拥有一个可以作为数据输入的界面，我们还要在我们的主程序中设定在某个合适的时间初始化并且显示这个窗口，这个任务就交给了Application的creation complete事件。即在Application 创建的时候执行：

Xml代码 复制代码
  1. <mx:Application  
  2.  xmlns:mx="http://www.adobe.com/2006/mxml"  
  3.  layout="absolute"  
  4.  width="500" height="300"  
  5.  creationComplete="init()">  

 在这个init()函数中，我们创建了AddNote的一个实例，并设置监听来自save按钮的saveNote事件

Js代码 复制代码
  1. private var addNoteScreen:AddNote;   
  2.   
  3. private function init():void  
  4. {   
  5.   addNoteScreen = new AddNote();   
  6.   addNoteScreen.addEventListener("SaveNote", saveNote);   
  7. }  

 

Xml代码 复制代码
  1. <mx:Button label="Add Note" click="addNote()"/>  

 当用户点击addNoe按钮的时候就要弹出刚才创建的窗口。这里我们使用PopManager来简单管理窗口的创建和关闭。

Js代码 复制代码
  1. private function addNote():void  
  2. {   
  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:Script>   
  2. <![CDATA[   
  3.  import mx.managers.PopUpManager;   
  4.     
  5.  private function close():void  
  6.  {   
  7.    PopUpManager.removePopUp(this);   
  8.  }   
  9. ]]>   
  10. </mx:Script>  

 

Xml代码 复制代码
  1. <mx:Button label="Cancel" click="close()" x="193" y="146"/>  

 若要保存用户提交的数据，我们需要调度一个自定义的事件.我们使用Event metadata tag来创建我们的自定义事件，而这个<metadata>标记将在TitleWindow中创建。

Java代码 复制代码
  1. <mx:Metadata>   
  2.   [Event(name="SaveNote")]   
  3. </mx:Metadata>  

 要调度这个时间，我们必须和按钮save挂钩起来：

Xml代码 复制代码
  1. <mx:Button label="Save" click="save()" x="264" y="146"/>  

 这个方法将添加到脚本中，这个方法就是简单调度SaveNoe事件：

Js代码 复制代码
  1. private function save():void  
  2. {   
  3.   this.dispatchEvent(new Event("SaveNote"));   
  4. }  

 下面是TitleWindow所有代码：

Xml代码 复制代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"  
  3.  layout="absolute" width="348" height="218"  
  4.  title="Add A Note">  
  5.   <mx:Metadata>  
  6.     [Event(name="SaveNote")]   
  7.   </mx:Metadata>  
  8.   <mx:Script>  
  9.    <![CDATA[  
  10.      import mx.managers.PopUpManager;  
  11.        
  12.      private function close():void  
  13.      {  
  14.        PopUpManager.removePopUp(this);  
  15.      }  
  16.        
  17.      private function save():void  
  18.      {  
  19.        this.dispatchEvent(new Event("SaveNote"));  
  20.      }  
  21.    ]]>  
  22.  </mx:Script>  
  23.   <mx:Label text="Author" x="35" y="10"/>  
  24.   <mx:TextInput id="author" width="150" x="84" y="8"/>  
  25.   <mx:Label text="Topic"  y="36" x="42"/>  
  26.   <mx:TextInput id="topic" width="150" x="84" y="34"/>  
  27.   <mx:Label text="Description"  y="62" x="10"/>  
  28.   <mx:TextArea id="description" width="234" height="77" x="84" y="61"/>  
  29.   <mx:Button label="Cancel" click="close()" x="193" y="146"/>  
  30.   <mx:Button label="Save" click="save()" x="264" y="146"/>  
  31. </mx:TitleWindow  

 要把弹出窗口中用户输入的数据显示在Application 中的datagrid中，其实也很简单，就是要数据绑定。前面的[Bindable]中的notes:ArrayCollecton就要与我们弹出窗口中的用户输入数据绑定起来。这个方法由save按钮触发后执行：

Js代码 复制代码
  1. private function saveNote(e:Event):void  
  2. {   
  3.   var note:Note = new Note();   
  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. }  

 在绑定之后，即显示在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>  

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

如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛

您可能感兴趣的文章:

发表评论 (2986人查看，0条评论)
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。
昵称：
最新评论
------分隔线----------------------------
大家感兴趣的内容
最近更新的内容

公司信息

· 网站介绍
· 联系我们
· 加入我们
· 服务条款

快速入口

· 365软件
· 杰创官网
· 建站工具
· 网站大全

其它栏目

· 建站教程
· 365学习

业务咨询

· 技术支持
· 服务时间：9:00-18:00
365建站网二维码

Powered by 365建站网 RSS地图 HTML地图

copyright © 2013-2024 版权所有 鄂ICP备17013400号