Extjs5開(kāi)發(fā)學(xué)習(xí)-31-加入模塊和菜單定義[4前臺(tái)通過(guò)ajax來(lái)調(diào)用數(shù)據(jù)與展示]

1、Extjs5開(kāi)發(fā)學(xué)習(xí)-31-加入模塊和菜單定義4前臺(tái)通過(guò)ajax來(lái)調(diào)用數(shù)據(jù)與展示上一節(jié)已經(jīng)把到現(xiàn)在為止的后臺(tái)做好了，啟動(dòng)tomcat ,在瀏覽器中打入網(wǎng)址：http:/localhost:8888/app/applicationinfo.do，就可以取得系統(tǒng)參數(shù)值。下面看一下在chrome調(diào)試器中的結(jié)果。 到此為止，后臺(tái)暫告一段落，又要開(kāi)始對(duì)前臺(tái)的extjs的程序進(jìn)行修改了。 首先要修改的是MainModel.js,在此js文件中加入構(gòu)造函數(shù)：javascriptview plaincopy1. constructor:function()2. Ext.log(MainModelconstru

2、ctor);3. varme=this;4. /這一句是關(guān)鍵，如果沒(méi)有的話，this還沒(méi)有初始化完成,下面的Ext.apply(me.data,.)這句就會(huì)出錯(cuò)5. this.callParent(arguments);6. /同步調(diào)用取得系統(tǒng)參數(shù)7. Ext.Ajax.request(8. url:applicationinfo.do,9. async:false,/同步10. success:function(response)11. vartext=response.responseText;12. /將字段串轉(zhuǎn)換成本地變量13. varapplicationInfo=Ext.decod

3、e(text,true);14. /把從后臺(tái)傳過(guò)來(lái)的參數(shù)加入到data中去15. Ext.apply(me.data,applicationInfo);16. 17. );18. 由于后臺(tái)傳送過(guò)來(lái)的data中的屬性名稱和原來(lái)寫在data里的屬性不一致，因此要修改Top.js和Bottom.js。（數(shù)據(jù)庫(kù)的表的字段我都是用tf_開(kāi)頭，只是為了區(qū)分這是一個(gè)數(shù)據(jù)庫(kù)里的字段而己。在看前臺(tái)的代碼時(shí)也能知道，所有tf_開(kāi)頭的變量都是從數(shù)庫(kù)里讀出來(lái)的）。 Top.js更改為如下：javascriptview plaincopy1. /*2. *系統(tǒng)主頁(yè)的頂部區(qū)域，主要放置系統(tǒng)名稱，菜單，和一些快捷按鈕3.

4、*/4. Ext.define(app.view.main.region.Top,5. 6. extend:Ext.toolbar.Toolbar,7. 8. alias:widget.maintop,/定義了這個(gè)組件的xtype類型為maintop9. 10. uses:app.ux.ButtonTransparent,app.view.main.menu.ButtonMainMenu,11. app.view.main.menu.SettingMenu,12. 13. defaults:14. xtype:buttontransparent15. ,16. 17. style:backgr

5、ound-color:#cde6c7,18. 19. height:40,20. 21. items:22. xtype:image,23. bind:/數(shù)據(jù)綁定到MainModel中data的system.iconUrl24. hidden:!systemInfo.tf_iconUrl,/如果system.iconUrl未設(shè)置，則此image不顯示25. src:systemInfo.tf_iconUrl/根據(jù)system.iconUrl的設(shè)置來(lái)加載圖片26. 27. ,28. xtype:label,29. bind:30. text:systemInfo.tf_systemName31.

6、 ,32. style:font-size:20px;color:blue;33. ,34. xtype:label,35. style:color:grey;,36. bind:37. text:(systemInfo.tf_systemVersion)38. 39. ,-,40. xtype:buttonmainmenu,41. hidden:true,42. bind:43. hidden:!isButtonMenu44. 45. ,46. text:首頁(yè),47. glyph:0xf015,48. handler:onHomePageButtonClick49. ,50. xtype:s

7、ettingmenu51. ,52. text:幫助,53. glyph:0xf05954. ,55. text:關(guān)于,56. glyph:0xf06a57. ,-,-,58. text:搜索,59. glyph:0xf00260. ,61. text:注銷,62. glyph:0xf01163. ,64. glyph:0xf102,65. handler:hiddenTopBottom,66. tooltip:隱藏頂部和底部區(qū)域,67. disableMouseOver:true68. 69. 70. ); Button.js更改為如下：javascriptview plaincopy1.

8、/*2. *系統(tǒng)主頁(yè)的底部區(qū)域，主要放置用戶單位信息，服務(wù)單位和服務(wù)人員信息3. */4. Ext.define(app.view.main.region.Bottom,5. 6. extend:Ext.toolbar.Toolbar,7. 8. alias:widget.mainbottom,9. 10. uses:app.ux.ButtonTransparent,11. 12. defaults:13. xtype:buttontransparent14. ,15. 16. style:background-color:#f6f5ec;,17. 18. items:19. bind:20.

9、 text:userInfo.tf_userdwmc21. ,22. glyph:0xf0f723. ,24. bind:25. text:userInfo.tf_departmentName26. 27. ,28. bind:29. text:用戶:userInfo.tf_userName30. ,31. glyph:0xf00732. ,-,33. bind:34. text:serviceInfo.tf_serviceDepartment35. ,36. glyph:0xf05937. 38. ,39. bind:40. text:serviceInfo.tf_serviceMen41.

10、 42. ,43. bind:44. text:serviceInfo.tf_serviceTelnumber45. ,46. glyph:0xf09547. ,48. bind:49. hidden:!serviceInfo.tf_serviceEmail,/綁定值前面加！表示取反，如果有email則不隱藏，如果email未設(shè)置，則隱藏50. text:serviceInfo.tf_serviceEmail51. ,52. glyph:0xf003,53. handler:function(button)54. /發(fā)送郵件55. varvm=button.up(app-main).getViewModel();56. varlink=mailto:+vm.get(serviceInfo.tf_serviceEmail)57. +?subject=+vm.get(userInfo.tf_userdwmc)58. +vm.get(userInfo.tf_userName)+關(guān)于59. +vm.get(systemInfo.tf_systemName)+的咨詢;60. window.location.href=link;61. 62. ,63. bind:64. text:serviceInfo.tf_copyrightOwner65. 66. 67. ); 以