首页搭建就是需要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: '管理员' } },