跟我一起学extjs5(31--加入模块和菜单定义[4前台通过ajax来调用数据与展示])

跟我一起学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/，会生成如下界面：



其中的系统名称，用户单位及操作员，服务单位及联系方式都是从后台取过来的。另外单击“电子邮件”那个链接，可以直接转到发送邮件的程序。



下一节中把菜单更新一下，发布源代码。