Extjs5开发学习-31-加入模块和菜单定义[4前台通过ajax来调用数据与展示]

1、Extjs5开发学习-31-加入模块和菜单定义4前台通过ajax来调用数据与展示上一节已经把到现在为止的后台做好了，启动tomcat ,在浏览器中打入网址：http:/localhost:8888/app/applicationinfo.do，就可以取得系统参数值。下面看一下在chrome调试器中的结果。 到此为止，后台暂告一段落，又要开始对前台的extjs的程序进行修改了。 首先要修改的是MainModel.js,在此js文件中加入构造函数：javascriptview plaincopy1. constructor:function()2. Ext.log(MainModelconstru

2、ctor);3. varme=this;4. /这一句是关键，如果没有的话，this还没有初始化完成,下面的Ext.apply(me.data,.)这句就会出错5. this.callParent(arguments);6. /同步调用取得系统参数7. Ext.Ajax.request(8. url:applicationinfo.do,9. async:false,/同步10. success:function(response)11. vartext=response.responseText;12. /将字段串转换成本地变量13. varapplicationInfo=Ext.decod

3、e(text,true);14. /把从后台传过来的参数加入到data中去15. Ext.apply(me.data,applicationInfo);16. 17. );18. 由于后台传送过来的data中的属性名称和原来写在data里的属性不一致，因此要修改Top.js和Bottom.js。（数据库的表的字段我都是用tf_开头，只是为了区分这是一个数据库里的字段而己。在看前台的代码时也能知道，所有tf_开头的变量都是从数库里读出来的）。 Top.js更改为如下：javascriptview plaincopy1. /*2. *系统主页的顶部区域，主要放置系统名称，菜单，和一些快捷按钮3.

4、*/4. Ext.define(app.view.main.region.Top,5. 6. extend:Ext.toolbar.Toolbar,7. 8. alias:widget.maintop,/定义了这个组件的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:/数据绑定到MainModel中data的system.iconUrl24. hidden:!systemInfo.tf_iconUrl,/如果system.iconUrl未设置，则此image不显示25. src:systemInfo.tf_iconUrl/根据system.iconUrl的设置来加载图片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:首页,47. glyph:0xf015,48. handler:onHomePageButtonClick49. ,50. xtype:s

7、ettingmenu51. ,52. text:帮助,53. glyph:0xf05954. ,55. text:关于,56. glyph:0xf06a57. ,-,-,58. text:搜索,59. glyph:0xf00260. ,61. text:注销,62. glyph:0xf01163. ,64. glyph:0xf102,65. handler:hiddenTopBottom,66. tooltip:隐藏顶部和底部区域,67. disableMouseOver:true68. 69. 70. ); Button.js更改为如下：javascriptview plaincopy1.

8、/*2. *系统主页的底部区域，主要放置用户单位信息，服务单位和服务人员信息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未设置，则隐藏50. text:serviceInfo.tf_serviceEmail51. ,52. glyph:0xf003,53. handler:function(button)54. /发送邮件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)+关于59. +vm.get(systemInfo.tf_systemName)+的咨询;60. window.location.href=link;61. 62. ,63. bind:64. text:serviceInfo.tf_copyrightOwner65. 66. 67. ); 以