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

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

2、lain copy 1. constructor : function()   2.     Ext.log('MainModel constructor');  3.     var me = this;  4.     / 这一句是关键，如果没有的话，this还没有初始化完成,下面的Ext.appl

3、y(me.data,.)这句就会出错  5.     this.callParent(arguments);  6.     / 同步调用取得系统参数  7.     Ext.Ajax.request(  8.                

4、; url : 'applicationinfo.do',  9.                 async : false, / 同步  10.              

5、0;  success : function(response)   11.                     var text = response.responseText;  12.        

6、             / 将字段串转换成本地变量  13.                     var applicationInfo = Ext.decode(text, true);

7、60; 14.                     / 把从后台传过来的参数加入到data中去  15.                     Ext.a

8、pply(me.data, applicationInfo);  16.                   17.             );  18.           由于后台传送

9、过来的data中的属性名称和原来写在data里的属性不一致，因此要修改Top.js和Bottom.js。（数据库的表的字段我都是用tf_开头，只是为了区分这是一个数据库里的字段而己。在看前台的代码时也能知道，所有tf_开头的变量都是从数库里读出来的）。        Top.js更改为如下：javascript view plain copy 1. /* 2.  * 系统主页的顶部区域，主要放置系统名称，菜单，和一些快捷按钮 3.  */  4. Ext.

10、define('app.view.main.region.Top',   5.   6.             extend : 'Ext.toolbar.Toolbar',  7.   8.             

11、;alias : 'widget.maintop', / 定义了这个组件的xtype类型为maintop  9.   10.             uses : 'app.ux.ButtonTransparent', 'app.view.main.menu.ButtonMainMenu',  11.

12、                     'app.view.main.menu.SettingMenu',  12.   13.             defaults :   1

13、4.                 xtype : 'buttontransparent'  15.             ,  16.   17.       

14、;      style : 'background-color : #cde6c7',  18.   19.             height : 40,  20.   21.       

15、0;     items :   22.                         xtype : 'image',  23.       

16、0;                 bind :  / 数据绑定到MainModel中data的system.iconUrl  24.                    &#

17、160;        hidden : '!systemInfo.tf_iconUrl', / 如果system.iconUrl未设置，则此image不显示  25.                        

18、;     src : 'systemInfo.tf_iconUrl' / 根据system.iconUrl的设置来加载图片  26.                           27.  

19、60;                  ,   28.                         xtype : '

20、;label',  29.                         bind :   30.                 

21、;            text : 'systemInfo.tf_systemName'  31.                         ,  32.

22、                         style : 'font-size:20px;color:blue;'  33.               &

23、#160;     ,   34.                         xtype : 'label',  35.         

24、                style : 'color:grey;',  36.                         bind

25、 :   37.                             text : '(systemInfo.tf_systemVersion)'  38.      &

26、#160;                    39.                     , '->',   40.  

27、                       xtype : 'buttonmainmenu',  41.                  &

28、#160;      hidden : true,  42.                         bind :   43.        

29、                     hidden : '!isButtonMenu'  44.                    &#

30、160;      45.                     , ' ', ' ',   46.            &

31、#160;            text : '首页',  47.                         glyph : 0xf015, &#

32、160;48.                         handler : 'onHomePageButtonClick'  49.              

33、60;      ,   50.                         xtype : 'settingmenu'  51.       

34、60;             ,   52.                         text : '帮助',  53.  

35、                       glyph : 0xf059  54.                     ,&

36、#160;  55.                         text : '关于',  56.                

37、;         glyph : 0xf06a  57.                     , '->', '->',   58.    

38、                     text : '搜索',  59.                      &#

39、160;  glyph : 0xf002  60.                     ,   61.                  

40、;       text : '注销',  62.                         glyph : 0xf011  63.     

41、60;               ,   64.                         glyph : 0xf102,  65.

42、                         handler : 'hiddenTopBottom',  66.                

43、60;        tooltip : '隐藏顶部和底部区域',  67.                         disableMouseOver : true  68.

44、                      69.   70.         );          Button.js更改为如下：javascript view plain copy 1

45、. /* 2.  * 系统主页的底部区域，主要放置用户单位信息，服务单位和服务人员信息 3.  */  4. Ext.define('app.view.main.region.Bottom',   5.   6.             extend : 'Ext.toolbar.Toolbar',

46、0; 7.   8.             alias : 'widget.mainbottom',  9.   10.             uses : 'app.ux.ButtonTransparent',&

47、#160; 11.   12.             defaults :   13.                 xtype : 'buttontransparent'  14.

48、60;           ,  15.   16.             style : 'background-color : #f6f5ec;',  17.   18.     

49、0;       items :   19.                         bind :   20.        

50、60;                    text : 'userInfo.tf_userdwmc'  21.                    

51、     ,  22.                         glyph : 0xf0f7  23.            

52、60;        ,   24.                         bind :   25.         &

53、#160;                   text : 'userInfo.tf_departmentName'  26.                   

54、0;       27.                     ,   28.                   &

55、#160;     bind :   29.                             text : '用户:userInfo.tf_userName'  30

56、.                         ,  31.                        

57、; glyph : 0xf007  32.                     , '->',   33.               

58、0;         bind :   34.                             text : 'serviceInfo.tf_servic

59、eDepartment'  35.                         ,  36.                   

60、;      glyph : 0xf059  37.   38.                     ,   39.           

61、0;             bind :   40.                             text : &#

62、39;serviceInfo.tf_serviceMen'  41.                           42.                &

63、#160;    ,   43.                         bind :   44.             

64、;                text : 'serviceInfo.tf_serviceTelnumber'  45.                      

65、60;  ,  46.                         glyph : 0xf095  47.               

66、      ,   48.                         bind :   49.           

67、0;                 hidden : '!serviceInfo.tf_serviceEmail', / 绑定值前面加！表示取反，如果有email则不隐藏，如果email未设置，则隐藏  50.            

68、0;                text : 'serviceInfo.tf_serviceEmail'  51.                       

69、  ,  52.                         glyph : 0xf003,  53.               &#

70、160;         handler : function(button)   54.                             / 发送邮件 

71、; 55.                             var vm = button.up('app-main').getViewModel();  56.       

72、                      var link = "mailto:" + vm.get('serviceInfo.tf_serviceEmail')  57.                 &#