跟我一起学extjs5(31--加入模块和菜单定义[4前台通过ajax来调用数据与展示])
浏览数：37 /
时间：2015年06月09日
跟我一起学extjs5(31--加入模块和菜单定义[4前台通过ajax来调用数据与展示])
上一节已经把到现在为止的后台做好了，启动tomcat ,在浏览器中打入网址：http://localhost:8888/app/applicationinfo.do，就可以取得系统参数值。下面看一下在chrome调试器中的结果。
到此为止，后台暂告一段落，又要开始对前台的extjs的程序进行修改了。
首先要修改的是MainModel.js,在此js文件中加入构造函数：
constructor : function() {
Ext.log('MainModel constructor');
var me = this;
// 这一句是关键，如果没有的话，this还没有初始化完成,下面的Ext.apply(me.data,....)这句就会出错
this.callParent(arguments);
// 同步调用取得系统参数
Ext.Ajax.request({
url : 'applicationinfo.do',
async : false, // 同步
success : function(response) {
var text = response.responseText;
// 将字段串转换成本地变量
var applicationInfo = Ext.decode(text, true);
// 把从后台传过来的参数加入到data中去
Ext.apply(me.data, applicationInfo);
}
});
}由于后台传送过来的data中的属性名称和原来写在data里的属性不一致，因此要修改Top.js和Bottom.js。（数据库的表的字段我都是用tf_开头，只是为了区分这是一个数据库里的字段而己。在看前台的代码时也能知道，所有tf_开头的变量都是从数库里读出来的）。
Top.js更改为如下：
/**
* 系统主页的顶部区域，主要放置系统名称，菜单，和一些快捷按钮
*/
Ext.define('app.view.main.region.Top', {
extend : 'Ext.toolbar.Toolbar',
alias : 'widget.maintop', // 定义了这个组件的xtype类型为maintop
uses : ['app.ux.ButtonTransparent', 'app.view.main.menu.ButtonMainMenu',
'app.view.main.menu.SettingMenu'],
defaults : {
xtype : 'buttontransparent'
},
style : 'background-color : #cde6c7',
height : 40,
items : [{
xtype : 'image',
bind : { // 数据绑定到MainModel中data的system.iconUrl
hidden : '{!systemInfo.tf_iconUrl}', // 如果system.iconUrl未设置，则此image不显示
src : '{systemInfo.tf_iconUrl}' // 根据system.iconUrl的设置来加载图片
}
}, {
xtype : 'label',
bind : {
text : '{systemInfo.tf_systemName}'
},
style : 'font-size:20px;color:blue;'
}, {
xtype : 'label',
style : 'color:grey;',
bind : {
text : '({systemInfo.tf_systemVersion})'
}
}, '->', {
xtype : 'buttonmainmenu',
hidden : true,
bind : {
hidden : '{!isButtonMenu}'
}
}, ' ', ' ', {
text : '首页',
glyph : 0xf015,
handler : 'onHomePageButtonClick'
}, {
xtype : 'settingmenu'
}, {
text : '帮助',
glyph : 0xf059
}, {
text : '关于',
glyph : 0xf06a
}, '->', '->', {
text : '搜索',
glyph : 0xf002
}, {
text : '注销',
glyph : 0xf011
}, {
glyph : 0xf102,
handler : 'hiddenTopBottom',
tooltip : '隐藏顶部和底部区域',
disableMouseOver : true
}]
});Button.js更改为如下：
/**
* 系统主页的底部区域，主要放置用户单位信息，服务单位和服务人员信息
*/
Ext.define('app.view.main.region.Bottom', {
extend : 'Ext.toolbar.Toolbar',
alias : 'widget.mainbottom',
uses : ['app.ux.ButtonTransparent'],
defaults : {
xtype : 'buttontransparent'
},
style : 'background-color : #f6f5ec;',
items : [{
bind : {
text : '{userInfo.tf_userdwmc}'
},
glyph : 0xf0f7
}, {
bind : {
text : '{userInfo.tf_departmentName}'
}
}, {
bind : {
text : '用户:{userInfo.tf_userName}'
},
glyph : 0xf007
}, '->', {
bind : {
text : '{serviceInfo.tf_serviceDepartment}'
},
glyph : 0xf059
}, {
bind : {
text : '{serviceInfo.tf_serviceMen}'
}
}, {
bind : {
text : '{serviceInfo.tf_serviceTelnumber}'
},
glyph : 0xf095
}, {
bind : {
hidden : '{!serviceInfo.tf_serviceEmail}', // 绑定值前面加！表示取反，如果有email则不隐藏，如果email未设置，则隐藏
text : '{serviceInfo.tf_serviceEmail}'
},
glyph : 0xf003,
handler : function(button) {
// 发送邮件
var vm = button.up('app-main').getViewModel();
var link = "mailto:" + vm.get('serviceInfo.tf_serviceEmail')
+ "?subject=" + vm.get('userInfo.tf_userdwmc')
+ vm.get('userInfo.tf_userName') + " 关于 "
+ vm.get('systemInfo.tf_systemName') + " 的咨询";
window.location.href = link;
}
}, {
bind : {
text : '©{serviceInfo.tf_copyrightOwner}'
}
}]
});以过以上修改，就可以完成系统的top 和 bottom中一些信息的更新的。启动tomcat ,在浏览器中打入：http://localhost:8888/app/，会生成如下界面：
其中的系统名称，用户单位及操作员，服务单位及联系方式都是从后台取过来的。另外单击“电子邮件”那个链接，可以直接转到发送邮件的程序。
下一节中把菜单更新一下，发布源代码。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
