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

Extjs5开发学习-31-加入模块和菜单定义[4前台通过ajax来调用数据与展示]上一节已经把到现在为止的后台做好了，启动tomcat,在浏览器中打入网址：，就可以取得系统参数值。下面看一下在chrome调试器中的结果。到此为止，后台暂告一段落，又要开始对前台的extjs的程序进行修改了。首先要修改的是MainModel.js,在此js文件中加入构造函数：[javascript]viewplaincopy1.constructor:function(){2.Ext.log('MainModelconstructor');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.decode(text,true);14.//把从后台传过来的参数加入到data中去15.Ext.apply(me.data,applicationInfo);16.}17.});18.}由于后台传送过来的data中的属性名称和原来写在data里的属性不一致，因此要修改Top.js和Bottom.js。（数据库的表的字段我都是用tf_开头，只是为了区分这是一个数据库里的字段而己。在看前台的代码时也能知道，所有tf_开头的变量都是从数库里读出来的）。Top.js更改为如下：[javascript]viewplaincopy1./**2.*系统主页的顶部区域，主要放置系统名称，菜单，和一些快捷按钮3.*/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:'buttontransparent'15.},16.17.style:'background-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_systemName}'31.},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:'{!isButtonMenu}'44.}45.},'','',{46.text:'首页',47.glyph:0xf015,48.handler:'onHomePageButtonClick'49.},{50.xtype:'settingmenu'51.},{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更改为如下：[javascript]viewplaincopy1./**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:'buttontransparent'14.},15.16.style:'background-color:#f6f5ec;',17.18.items:[{19.bind:{20.text:'{userInfo.tf_userdwmc}'21.},22.glyph:0xf0f723.},{24.bind:{25.text:'{userInfo.tf_departmentName}'26.}27.},{28.bind:{29.text:'用户:{userInfo.tf_userName}'30.},31.glyph:0xf00732.},'-',{33.bind:{34.text:'{serviceInfo.tf_serviceDepartment}'35.},36.glyph:0xf05937.38.},{39.bind:{40.text:'{serviceInfo.tf_serviceMen}'41.}42.},{43.bind:{44.text:'{serviceInfo.tf_serviceTelnumber}'45.},46.glyph:0xf09547.},{48.bind:{49.hidden:'{!serviceInfo.tf_serviceEmail}',//绑定值前面加！表示取反，如果有email则不隐藏，如果email未设置，则隐藏50.text:'{serviceInfo.tf_serviceEmail}'51.},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_copyrightOwner}'65.}66.}]67.});以过以上修改，就可以完成系统的top和bottom中一些信息的更新的。启动tomcat,在浏览器中打入：，会生成如下界面：其中的系统名称，用户单位及操作员，服务单位及联系方式都是从后台取过来的。另外单击“电子邮件”那个链接，可以直接转到发送邮件的程序。下一节中把菜单更新一下，发布源代码。