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

Ext.define('saas.view.main.Main', {
    extend: 'Ext.container.Container',
    xtype: 'main',

    requires: [
        'Ext.list.Tree',
        'Ext.Img'
    ],
    
    controller: 'main',
    viewModel: 'main',
    
    cls: 'main-ct',
    id: 'mainView',
    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 class="logo-text">优企云服</div></div>',
                    bind: {
                        width: '{navWidth}'
                    }
                },
                {
                    margin: '0 0 0 8',
                    ui: 'header',
                    iconCls:'x-fa fa-navicon',
                    id: 'main-navigation-btn',
                    handler: 'onToggleNavigationSize'
                },{
                    reference: 'mainprofile',
                    arrowVisible: false,
                    ui: 'header',
                    bind: {
                        text: '{company.name}'
                    },
                    menu: {
                        items: [{
                            xtype: 'menuseparator'
                        }]
                    }
                },
                '->',
                {
                    iconCls:'icon-usoftchina',
                    ui: 'header',
                    tooltip: '优软云',
                    handler:function(){
					    window.open('http://www.usoftchina.com','_blank');
                    }
                },
                {
                    iconCls:'x-fa fa-question',
                    ui: 'header',
                    arrowVisible: false,
                    width:50, 
                    listeners:{
                        'mouseover':function(){
                            this.showMenu(); 
                        },
                        'mouseout':function(btn,e){
                            var cx = e.browserEvent.clientX, cy = e.browserEvent.clientY;
                            var btnLayout = btn.el.dom.getBoundingClientRect();
                            if(cx <= btnLayout.left || cx >= btnLayout.left+btnLayout.width || cy <= btnLayout.top) {
                                btn.hideMenu();
                            }
                        } 
                    },
                    menu: {
                        cls:'nav-menu',
                        items: [{
                            text: '新手导航',
                            iconCls:'x-fa fa-comment-o',
                            handler:function(){
                               console.log("新手导航");
                            }
                        },{
                            text: '用户手册',
                            iconCls:'x-fa fa-comment-o',
                            handler:function(){
                                console.log("用户手册");
                            }
                        },{
                            text: '常见问题',
                            iconCls:'x-fa fa-question-circle-o',
                            handler:function(){
                                console.log("常见问题");
                            }
                        },{
                            text: '客服热线',
                            iconCls:'x-fa fa-comment-o',
                            handler:function(){
                                console.log("客服热线");
                            }
                        }]
                    }
                },
                {
                    margin: '0 0 0 8',
                    xtype: 'tbtext',
                    cls:'nav-realname',
                    bind: {
                        //tooltip: '{account.realname}',
                        html: '{account.realname}'
                    },
                    style:{
                        cursor:'default',
                        textAlign:'center'
                    }
                },
                {
                    ui: 'header',
                    id:"userImage",
                    height: 35,
                    width: 35,
                     bind: {
                        html:'<img class="x-img x-box-item x-toolbar-item x-img-header" style="width: 35px; height: 35px; margin: 0px;" src="{avatarUrl}" alt="">'
                    }, 
                    menu: {
                        cls:'nav-menu',
                        items: [ {  
                            text: '账户中心',
                            iconCls:'x-fa x-fa fa-user-o',
                            handler:function(){
                            console.log("账户中心");
                            }
                        },{  
                            text: '意见反馈',
                            iconCls:'x-fa fa-comment-o',
                            handler:function(){
                            console.log("意见反馈");
                            }
                        }, {
                            text: '退出',
                            iconCls:'x-fa fa-power-off',
                            handler: 'onLogout'
                        }]
                    } ,
                     listeners:{
                        'mouseover':function(btn){
                            console.log("btn:",btn);
                            btn.menu ? (btn.menu.isVisible() ? '' : btn.showMenu()) : '';
                        },
                        'mouseout':function(btn,e){
                            console.log("btn:",btn);
                            window.setTimeout(function(){
                                var cx = e.browserEvent.clientX, cy = e.browserEvent.clientY;
                                console.log(btn.el.dom);
                                var btnLayout = btn.el.dom.getBoundingClientRect();
                                if(cx <= btnLayout.left || cx >= btnLayout.left+btnLayout.width || cy <= btnLayout.top) {
                                    btn.hideMenu();
                                }
                            }, 10); 
                        }
                    } 
                }
            ]
        },
        {
            xtype: 'maincontainerwrap'
        }
    ]
});