saas-platform/frontend/saas-web/app/view/main/Main.js

/**
 * This class is the main view for the application. It is specified in app.js as the
 * "mainView" property. That setting automatically applies the "viewport"
 * plugin causing this view to become the body element (i.e., the viewport).
 *
 * TODO - Replace this content of this view to suite the needs of your application.
 */
Ext.define('saas.view.main.Main', {
    extend: 'Ext.container.Container',
    xtype: 'main',

    requires: [
        'Ext.list.Tree'
    ],

    controller: 'main',
    viewModel: 'main',

    cls: 'main-ct',
    itemId: 'mainView',

    layout: {
        type: 'vbox',
        align: 'stretch'
    },

    items: [
        {
            xtype: 'toolbar',
            cls: 'main-headerbar shadow',
            height: 64,
            itemId: 'headerBar',
            items: [
                {
                    xtype: 'component',
                    reference: 'mainLogo',
                    cls: 'main-logo-wrap',
                    html: '<div class="main-logo"><img src="resources/images/default/logo-default.png">优企云服</div>',
                    width: 250
                },
                {
                    margin: '0 0 0 8',
                    ui: 'header',
                    iconCls:'x-fa fa-navicon',
                    id: 'main-navigation-btn',
                    handler: 'onToggleNavigationSize'
                },
                '->',
                {
                    iconCls:'x-fa fa-search',
                    ui: 'header',
                    tooltip: 'See latest search'
                },
                {
                    iconCls:'x-fa fa-bell',
                    ui: 'header',
                    tooltip: 'Check your messages'
                },
                {
                    iconCls:'x-fa fa-question',
                    ui: 'header',
                    tooltip: 'Help / FAQ\'s'
                },
                {
                    iconCls:'x-fa fa-th-large',
                    ui: 'header',
                    tooltip: 'See your profile'
                },
                {
                    xtype: 'tbtext',
                    text: 'administrator',
                    cls: 'top-user-name'
                },
                {
                    xtype: 'image',
                    cls: 'header-right-profile-image',
                    height: 35,
                    width: 35,
                    alt:'current user image',
                    src: 'resources/images/default/user-profile-default.png'
                }
            ]
        },
        {
            xtype: 'maincontainerwrap'
        }
    ]
});