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',

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

    initComponent: function() {
        var me = this;
        var view = new Ext.DataView({
            store : Ext.create('Ext.data.Store', {
                fields: ['text', 'iconCls'],
                data: [{
                    text: '采购',
                    iconCls: 'x-fa fa-shopping-basket',
                    items: [{
                        text: '制单',
                        items: [{
                            id: 'purchase',
                            text: '采购单',
                            formType:'purchase-purchase-formpanel',
                            queryType: 'purchase-purchase-querypanel'
                        }, {
                            id: 'purchaseIn',
                            text: '采购验收单',
                            formType:'purchase-purchase-formpanel',
                            queryType: 'purchase-purchaseIn-querypanel'
                        },{
                            id: 'purchaseOut',
                            text: '采购验退单',
                            formType:'purchase-purchaseOut-formpanel',
                            queryType: 'purchase-purchaseOut-querypanel'
                        },{
                            id: 'form1',
                            text: '测试-采购单明细界面',
                            formType: 'test-order-formpanel'
                        }, {
                            id: 'myform',
                            text: '测试-明细界面',
                            formType: 'test-myform-formpanel'
                        }, {
                            id: 'myquerytest',
                            text: '测试-采购单查询界面',
                            queryType: 'test-query-querypanel',
                        }]
                    }, {
                        text: '报表',
                        items: [{
                            text: '采购明细表'
                        }, {
                            text: '采购付款一览表'
                        }]
                    }]
                }, {
                    text: '销售',
                    iconCls: 'x-fa fa-shopping-cart',
                }],
            }),
            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>',
                    '<div class="x-navitem-menu" style="display: none;">',
                        '<div class="nav-menu-body">',
                            '<tpl for="items">',
                            '<div class="menu">',
                                '<h3 class="menu-title">{text}</h3>',
                                '<ul class="menu-content">',
                                    '<tpl for="items">',
                                    '<li class="menuitem">',
                                        '<span class="item-text" data-id="{id}" data-text="{text}" data-type="form" data-formType="{formType}">',
                                            '{text}',
                                        '</span>',
                                        '<tpl if="{queryType}">',
                                        '<i class="item-icon" data-id="{id}" data-text="{text}" data-type="query" data-queryType="{queryType}">查询</i>',
                                        '</tpl>',
                                    '</li>',
                                    '</tpl>',
                                '</ul>',
                            '</div>',
                            '</tpl>',
                        '</div>',
                    '</div>',
                '</li>',
                '</tpl>',
            '</ul>'),
            trackOver: true,
            overItemCls : 'x-navitem-over',
            selectedClass : 'x-navitem-selected',
            singleSelect : true,
            itemSelector : '.x-navitem',
            menuSeletor: '.menuitem',
            listeners: {
                itemmouseenter: me.toggleShowNavMenu,
                itemmouseleave: me.toggleShowNavMenu,
                itemclick: me.menuItemClick,
                scope: me
            }
        });

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

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

    toggleShowNavMenu: function(view, record, item, index, e, eOpts) {
        var menuBody = item.getElementsByClassName('x-navitem-menu')[0];
        if(menuBody) {
            var display = menuBody.style.display,
            hidden = display == 'none';

            // if(hidden) {
            //     menuBody.animate({ to: { opacity: 1} }, 500, function() {
            //         console.log('hidden');
            //     });
            // }else {
            //     menuBody.animate({ to: { opacity: 0} }, 500, function() {
            //         console.log('show');
            //     });
            // }
            // menuBody.classList[ope]('x-hidden');

            menuBody.style.width = hidden ? 'auto' : '0';
            menuBody.style.display = hidden ? 'block' : 'none';
            // menuBody.animate({ opacity: o,opacity:1},1000);
            
            // menuBody.animate({dynamic: true, to: {display: newDisplay}});
        }
    },

    menuItemClick: function(view, record, item, index, e, eOpts) {
        var me = this,
        mainView = Ext.getCmp('mainView'),
        mainViewEl = mainView.getEl().dom,
        controller = mainView.getController(),
        target = e.target,
        clsName = target.className,
        dataset = target.dataset;
        
        if(clsName == 'item-text' || clsName == 'item-icon') {
            controller.setActiveTab(dataset);
        }
        // var menuBody = mainViewEl.getElementsByClassName('x-navitem-menu');
        // for(var i = 0; i < menuBody.length; i++) {
        //     menuBody[i].style.display = 'none';
        //     menuBody[i].style.width = 0;
        // }
    },
});