【工作笔记】从零开始学ExtJs6（三）—— 首页搭建

首页搭建就是需要3层，上面板（项目名称和工具栏等），做面板（树形菜单），中间面板（变换的内容）

分成三层的代码（很简单）关键代码如下

extend: 'Ext.container.Viewport',
layout : 'border',
defaults:{
collapsible: true,
split: true
},
items : [{
xtype : 'maintop',
region : 'north' ,// 把他放在最顶上
collapsible: false,
split: false,
height:50
},{
xtype : 'mainleft',
region : 'west', // 左边面板
title : '导航菜单',
width : 220,
hidden : false,

}, {
region : 'center', // 中间面版
xtype : 'maincenter',
collapsible: false
}]

上面板的用户信息和项目信息

extend: 'Ext.toolbar.Toolbar',
alias:'widget.maintop',
style:'background-color:rgba(68,70,77,0.8);',

items:[{
xtype: 'image',
bind: { // 数据绑定到MainModel中data的system.logo
hidden: '{!systerm.logo}', // 如果system.logo未设置，则此image不显示
src: '{systerm.logo}' // 根据system.iconUrl的设置来加载图片
}
}, {
xtype: 'label',
bind: {
text: '{system.name}' // text值绑定到system.name
},
style: 'font-size:20px;color:#FFF;'
}, {
xtype: 'label',
style: 'color:#FFF;',
bind: {
text: '({system.version})'
}
}, '->', {
xtype:'button',
bind:{
iconCls:'x-fa fa-user', //图标
text:'<span style="font-size: 14px;">{userInfo.userName}</span>'
},
menu:[{  //按钮下拉框
text:'注销',
iconCls:'x-fa fa-power-off',
handler: 'onLoginOutClick'
}],
style:'border:none;background-color:rgba(255,255,255,0.6);background-image:none;'
}],

双向绑定ViewModel

data内的数据通过{userInfo.userName}进行绑定

extend: 'Ext.app.ViewModel',
alias: 'viewmodel.main',
data: {
name: 'app',
// 系统信息
system: {
name: 'xxx报表系统',
version: '0.0.1',
iconUrl: ''
},

//用户信息
userInfo: {
userName: '管理员'
}
},