五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > Flex使用彈出窗口為DataGrid添加新數(shù)據(jù)

Flex使用彈出窗口為DataGrid添加新數(shù)據(jù)

文章來源：365jz.com     點(diǎn)擊數(shù)：3005    更新時間：2009-12-02 21:17   參與評論

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

例子展示：

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

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

Xml代碼 復(fù)制代碼
  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. }  

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

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

  然后在把它設(shè)置成為datagrid的provider.

Xml代碼 復(fù)制代碼
  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>  

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

Xml代碼 復(fù)制代碼
  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>  

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

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

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

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

 

Xml代碼 復(fù)制代碼
  1. <mx:Button label="Add Note" click="addNote()"/>  

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

Js代碼 復(fù)制代碼
  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，就是彈出窗口，這里我們傳輸了三個參數(shù)，addNoteScreen為AddNote的一個實例，this為當(dāng)前窗口，true為是否設(shè)是否只有彈出的窗口可被點(diǎn)擊，即是否只有彈出的窗口處于Active狀態(tài)。第二個方法，就是設(shè)置彈出窗口的位置。

當(dāng)窗口彈出來的時候，我們可以做兩件事情，一提交保存用戶輸入數(shù)據(jù)，二是簡單的關(guān)閉窗口。如果關(guān)閉窗口，我們也使用PopManager管理器：

Js代碼 復(fù)制代碼
  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代碼 復(fù)制代碼
  1. <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)建。

Java代碼 復(fù)制代碼
  1. <mx:Metadata>   
  2.   [Event(name="SaveNote")]   
  3. </mx:Metadata>  

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

Xml代碼 復(fù)制代碼
  1. <mx:Button label="Save" click="save()" x="264" y="146"/>  

 這個方法將添加到腳本中，這個方法就是簡單調(diào)度SaveNoe事件：

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

 下面是TitleWindow所有代碼：

Xml代碼 復(fù)制代碼
  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  

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

Js代碼 復(fù)制代碼
  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中之后，我們要把彈出的窗口關(guān)閉，即removePopUp。這里就是全部的介紹了，下面是Application的代碼：

Xml代碼 復(fù)制代碼
  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

如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答！！ 點(diǎn)擊進(jìn)入論壇

發(fā)表評論 (3005人查看，0條評論)
請自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴(yán)禁發(fā)布色情、暴力、反動的言論。
昵稱：
最新評論
------分隔線----------------------------

其它欄目

· 建站教程
· 365學(xué)習(xí)

業(yè)務(wù)咨詢

· 技術(shù)支持
· 服務(wù)時間：9:00-18:00
365建站網(wǎng)二維碼

Powered by 365建站網(wǎng) RSS地圖 HTML地圖

copyright © 2013-2024 版權(quán)所有 鄂ICP備17013400號