【工作笔记】从零开始学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:'{userInfo.userName}'
        },
        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: '管理员'
        }
    },