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

Ext.define('saas.view.main.Navigation', {
    extend: 'Ext.panel.Panel',
    xtype: 'main-navigation',
    ui: 'nav',

    reference: 'navigationTreeList',

    width: 180,

    navCollapsed: false,
    cls: 'x-navpanel',

    menuPadding: 0,

    initComponent: function () {
        var me = this;
        var view = new Ext.DataView({
            store: Ext.create('Ext.data.Store', {
                autoLoad: true,
                fields: ['text', 'iconCls'],
                proxy: {
                    type: 'ajax',
                    url: 'resources/json/navigation.json',
                    reader: {
                        type: 'json'
                    }
                }
            }),
            tpl: new Ext.XTemplate('<ul class="x-navlist">',
                '<tpl for=".">',
                '<li class="x-navitem">',
                '<div class="x-navitem-body">',
                '<div class="nav-inner-wrap" style="margin-left: 0px;">',
                '<div class="nav-inner-icon {iconCls}"></div>',
                '<div class="nav-inner-text">{text}</div>',
                '</div>',
                '</li>',
                '</tpl>',
                '</ul>'),
            trackOver: true,
            overItemCls: 'x-navitem-over',
            selectedItemCls: 'x-navitem-selected',
            singleSelect: true,
            itemSelector: '.x-navitem',
            listeners: {
                itemmouseenter: function(navView, record, navItem, index, e, eOpts) {
                    window.clearTimeout(me.Timer);
                    me.Timer = setTimeout(function() {
                        me.showNavMenu(navView, record, navItem, index, e, eOpts);
                    }, 80);
                },
                itemmouseleave: function(view, record, item, index, e, eOpts) {
                    window.clearTimeout(me.Timer);
                    me.hideNavMenu(view, record, item, index, e, eOpts);
                },
                itemClick: function(navView, record, navItem, index, e, eOpts) {
                    window.clearTimeout(me.Timer);
                    me.Timer = setTimeout(function() {
                        me.showNavMenu(navView, record, navItem, index, e, eOpts);
                    }, 20);
                },
                scope: me
            }
        });

        Ext.apply(me, {
            items: [view]
        });

        me.view = view;
        me.callParent();
    },

    // clickNavMenu: function (view, record, item, index, e, eOpts) {
    //     var me = this;
    //     this.showNavMenu(view, record, item, index, e, eOpts);
    // },

    showNavMenu: function (navView, record, navItem, index, e, eOpts) {
        var me = this,
            recData = record.data,
            menuItems = recData.items || [],
            itemBox = navItem.getBoundingClientRect(),
            pos = [itemBox.left + itemBox.width, itemBox.top],
            id = recData.id,
            menuId = 'navMenu-' + id,
            menu = Ext.getCmp(menuId);

        if (!menu) {
            var view = new Ext.DataView({
                store: Ext.create('Ext.data.Store', {
                    fields: ['id', 'text', 'addType', 'viewType'],
                    data: menuItems
                }),
                tpl: new Ext.XTemplate('<div class="x-navitem-menu">',
                    '<div class="nav-menu-body">',
                    '<tpl for=".">',
                    '<div class="menu">',
                        '<div class="menu-title">',
                            '<span class="menu-title-text">{text}</span>',
                        '</div>',
                        '<div class="menu-content">',
                            '<tpl for="items">',
                            '<div class="menuitem">',
                                '<div class="item-text" data-config="{config}" data-id="{id}" data-text="{text}" data-type="query" data-viewType="{viewType}">',
                                    '{text}',
                                '</div>',
                                '<tpl if="{addType}">',
                                '<div class="item-icon" data-id="{id}" data-text="{text}" data-type="form" data-viewType="{addType}">新增</div>',
                                '</tpl>',
                            '</div>',
                            '</tpl>',
                        '</div>',
                    '</div>',
                    '</tpl>',
                    '</div>',
                    '</div>'),
                trackOver: true,
                overItemCls: 'menuitem-over',
                selectedItemCls: 'menuitem-selected',
                singleSelect: true,
                itemSelector: 'menu',
                listeners: {
                    boxready: function (view, width, height, eOpts) {
                        var menu = view.up('menu'),
                            menuView = view.el.dom.getElementsByClassName('x-navitem-menu')[0],
                            menuBox = menuView.getBoundingClientRect(),
                            menuViewWidth = menuBox.width + me.menuPadding * 2,
                            menuViewHeight = menuBox.height + me.menuPadding * 2,
                            menuItem = menuView.getElementsByClassName('menuitem');

                        menu.setWidth(menuViewWidth);
                        menu.setHeight(menuViewHeight);
                        menu.updateLayout();

                        view.el.dom.addEventListener('mouseenter', function (e) {
                            menu.show();
                            menu.navItem.classList.add(menu.navView.overItemCls);
                        });

                        view.el.dom.addEventListener('mouseleave', function (e) {
                            menu.navItem.classList.remove(menu.navView.overItemCls);
                            menu.hide();
                            // var ex = e.clientX,
                            //     ey = e.clientY,
                            //     box = menuView.getBoundingClientRect(),
                            //     navItem = menu.navItem,
                            //     navBox = navItem.getBoundingClientRect();

                            // if ((ex <= box.left && (ey <= (navBox.top - 5) || ey >= (navBox.top + navBox.height))) || ey <= (box.top - 5) || ex >= (box.left + box.width + 5) || ey >= (box.top + box.height + 5)) {
                            //     menu.navItem.classList.remove(menu.navView.overItemCls);
                            //     menu.hide();
                            // }
                        });

                        Ext.Array.each(menuItem, function (mi) {
                            var menuItemText = mi.getElementsByClassName('item-text');
                            var menuItemIcon = mi.getElementsByClassName('item-icon');

                            Ext.Array.each(menuItemText, function (item) {
                                item.addEventListener('click', function (e) {
                                    var target = e.target,
                                    dataset = target.dataset,
                                    viewType = dataset.viewtype,
                                    type = dataset.type,
                                    text = dataset.text,
                                    config = dataset.config,
                                    id = dataset.id;

                                    var tabTitle = text,
                                    tabId = 'maintab-' + type + '-' + id;

                                    menu.navItem.classList.remove(menu.navView.overItemCls);
                                    saas.util.BaseUtil.openTab(viewType, tabTitle, tabId,config);
                                    menu.hide();
                                });
                            });
                            Ext.Array.each(menuItemIcon, function (item) {
                                item.addEventListener('click', function (e) {
                                    var target = e.target,
                                    dataset = target.dataset,
                                    viewType = dataset.viewtype,
                                    type = dataset.type,
                                    text = dataset.text,
                                    id = dataset.id;

                                    var tabTitle ='新增' + text,
                                    tabId = viewType + '-add';

                                    menu.navItem.classList.remove(menu.navView.overItemCls);
                                    saas.util.BaseUtil.openTab(viewType, tabTitle, tabId);
                                    menu.hide();
                                });
                            });
                        });
                    },
                }
            });
            var menu = Ext.create('Ext.menu.Menu', {
                navView: navView,
                navItem: navItem,
                id: menuId,
                width: window.innerWidth,
                cls: 'x-nav-menu',
                layout: 'fit',
                shadow: 'drop',
                bodyPadding: me.menuPadding,
                items: [view]
            });
        }
        menu.showAt(pos);
    },

    hideNavMenu: function (view, record, item, index, e, eOpts) {
        var recData = record.data,
            id = recData.id,
            menuId = 'navMenu-' + id,
            menu = Ext.getCmp(menuId),
            cx, cy, itemBox;

        if (menu) {
            cx = e.browserEvent.clientX,
            cy = e.browserEvent.clientY,
            itemBox = item.getBoundingClientRect();

            if (cx <= itemBox.left || cy <= itemBox.top || (cy >= (itemBox.top + itemBox.height) && cx <= (itemBox.left + itemBox.width - 10))) {
                menu.hide();
            }
        }
    }
});