亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频

Flex使用彈出窗口為DataGrid添加新數據

系統 2419 0

經常在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 = "AddNote" />
  18. </ mx:Panel >
  19. </ mx:Application >

這些代碼看起來并不陌生,DataGrid三個列的數據對應我們Note類的三個屬性,我們定義Note類如下:

Xml代碼 復制代碼
  1. package
  2. {
  3. publicclassNote
  4. {
  5. publicvarauthor:String;
  6. publicvartopic:String;
  7. publicvardescription:String;
  8. }
  9. }

要真正使得我們的數據開始運轉,我們還需要一個腳本塊:需要一個數據結構來保存我們的Note信息。這里我們使用notes:ArrayCollection來記錄我們要添加和已經添加的數據。這些數據能夠在DataGrid中顯示,是因為我們要把它設置成為DataGrid的provider.接下來我們先定義和初始化這個notes.

Js代碼 復制代碼
  1. <mx:Script>
  2. <![CDATA[
  3. import mx.collections.ArrayCollection;
  4. [Bindable]
  5. private var notes:ArrayCollection= new ArrayCollection();
  6. ]]>
  7. </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 = "AddANote" >
  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. private function init(): void
  3. {
  4. addNoteScreen= new AddNote();
  5. addNoteScreen.addEventListener( "SaveNote" ,saveNote);
  6. }

Xml代碼 復制代碼
  1. < mx:Button label = "AddNote" 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. private function close(): void
  5. {
  6. PopUpManager.removePopUp( this );
  7. }
  8. ]]>
  9. </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 = "AddANote" >
  5. < mx:Metadata >
  6. [Event( name = "SaveNote" )]
  7. </ mx:Metadata >
  8. < mx:Script >
  9. <![CDATA[
  10. importmx.managers.PopUpManager;
  11. privatefunctionclose():void
  12. {
  13. PopUpManager.removePopUp(this);
  14. }
  15. privatefunctionsave():void
  16. {
  17. this.dispatchEvent(newEvent("SaveNote"));
  18. }
  19. ]]>
  20. </ mx:Script >
  21. < mx:Label text = "Author" x = "35" y = "10" />
  22. < mx:TextInput id = "author" width = "150" x = "84" y = "8" />
  23. < mx:Label text = "Topic" y = "36" x = "42" />
  24. < mx:TextInput id = "topic" width = "150" x = "84" y = "34" />
  25. < mx:Label text = "Description" y = "62" x = "10" />
  26. < mx:TextArea id = "description" width = "234" height = "77" x = "84" y = "61" />
  27. < mx:Button label = "Cancel" click = "close()" x = "193" y = "146" />
  28. < mx:Button label = "Save" click = "save()" x = "264" y = "146" />
  29. </ 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. importmx.managers.PopUpManager;
  10. importmx.collections.ArrayCollection;
  11. [Bindable]
  12. privatevarnotes:ArrayCollection=newArrayCollection();
  13. privatevaraddNoteScreen:AddNote;
  14. privatefunctioninit():void
  15. {
  16. addNoteScreen=newAddNote();
  17. addNoteScreen.addEventListener("SaveNote",saveNote);
  18. }
  19. privatefunctionaddNote():void
  20. {
  21. PopUpManager.addPopUp(addNoteScreen,this,true);
  22. PopUpManager.centerPopUp(addNoteScreen);
  23. addNoteScreen.author.text="";
  24. addNoteScreen.topic.text="";
  25. addNoteScreen.description.text="";
  26. }
  27. privatefunctionsaveNote(e:Event):void
  28. {
  29. varnote:Note=newNote();
  30. note.author=addNoteScreen.author.text;
  31. note.topic=addNoteScreen.topic.text;
  32. note.description=addNoteScreen.description.text;
  33. notes.addItem(note);
  34. PopUpManager.removePopUp(addNoteScreen);
  35. }
  36. ]]>
  37. </ mx:Script >
  38. < mx:Panel title = "Notes"
  39. width = "100%" height = "100%"
  40. layout = "vertical" horizontalAlign = "right"
  41. paddingTop = "3" paddingLeft = "3" paddingRight = "3" paddingBottom = "3" >
  42. < mx:DataGrid dataProvider = "{notes}" width = "100%" height = "100%" >
  43. < mx:columns >
  44. < mx:DataGridColumn headerText = "Author" dataField = "author" width = "80" />
  45. < mx:DataGridColumn headerText = "Topic" dataField = "topic" width = "100" />
  46. < mx:DataGridColumn headerText = "Description" dataField = "description" />
  47. </ mx:columns >
  48. </ mx:DataGrid >
  49. < mx:Button label = "AddNote" click = "addNote()" />
  50. </ mx:Panel >
  51. </ mx:Application >

參考翻譯: http://www.switchonthecode.com/tutorials/flex-datagrid-adding-rows-using-a-popup

Flex使用彈出窗口為DataGrid添加新數據


更多文章、技術交流、商務合作、聯系博主

微信掃碼或搜索:z360901061

微信掃一掃加我為好友

QQ號聯系: 360901061

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。

【本文對您有幫助就好】

您的支持是博主寫作最大的動力,如果您喜歡我的文章,感覺我的文章對您有幫助,請用微信掃描上面二維碼支持博主2元、5元、10元、自定義金額等您想捐的金額吧,站長會非常 感謝您的哦?。。?/p>

發表我的評論
最新評論 總共0條評論
主站蜘蛛池模板: 99久久综合狠狠综合久久一区 | 免费两性的视频网站 | 激情综合五月亚洲婷婷 | 天天射天天射天天干 | 久久久久久青草大香综合精品 | 久久国产精品99精品国产 | 国产大片91精品免费观看不卡 | 欧美末成年videos在线观看 | 久久免费视频1 | 国产成人精品久久 | 四虎永久免费紧急入口 | 四虎国产精品永久在线网址 | 亚洲欧美国产毛片在线 | 香蕉视频日本 | 91福利影院 | 一级毛片无毒不卡直接观看 | 亚洲一区二区三区播放在线 | 成人a大片高清在线观看 | 日日摸夜夜摸人人嗷嗷叫 | 亚洲不卡在线观看 | 9i9精品国产免费久久 | 一区二区三区在线 | 网站 | 国产乱人伦偷精品视频不卡 | 精品福利在线 | 不卡在线 | 亚洲精品成人456在线播放 | 99精品国产在这里白浆 | 毛片 mp4| 亚洲va欧美va国产va天堂 | 手机看黄av免费网址 | 久久99九九 | 乱子伦xxxx厨房 | 色偷偷久久一区二区三区 | 亚洲欧美中文字幕在线网站 | 久久久一本 | 国产亚洲精品久久精品6 | 夜夜狠操 | 五月天婷婷一区二区三区久久 | 成年人一级毛片 | 四虎影视com88 | 伊人丁香狠狠色综合久久 |