标签:extjs5 开发经验 sencha java web
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);
}
});
}/**
* 系统主页的顶部区域,主要放置系统名称,菜单,和一些快捷按钮
*/
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
}]
});/**
* 系统主页的底部区域,主要放置用户单位信息,服务单位和服务人员信息
*/
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}'
}
}]
});跟我一起学extjs5(31--加入模块和菜单定义[4前台通过ajax来调用数据与展示])
标签:extjs5 开发经验 sencha java web
原文地址:http://blog.csdn.net/jfok/article/details/39648361