yvan-ext/src/controls/MainTab.js

import _ from 'lodash'
import $ from 'jquery'
import qs from 'qs'
import {invokeMethod} from "../utils";

export default function () {

    Ext.define('Yvan.MainTab', {
        extend: 'Ext.tab.Panel',
        xtype: 'maintab',

        plugins: Ext.create('Ext.ux.TabCloseMenu', {
            closeTabText: '关闭',
            closeOthersTabsText: '关闭其他',
            closeAllTabsText: '关闭所有'
        }),

        constructor(config) {
            const me = this
            const newConfig = _.defaultsDeep({
                // 强制属性

            }, config)
            this.superclass.constructor.call(me, newConfig)
        },

        initComponent() {
            const me = this
            this.on({
                tabchange(tabPanel, newCard, oldCard, eOpts) {
                    _.defer(() => {
                        me.changeHash(newCard.path)
                        window['cp'] = newCard.yvanScope
                    })

                    $(window).trigger('tabChange', {
                        tabPanel, newCard, oldCard, eOpts
                    });
                },
                afterrender() {
                    _.defer(() => {
                        me.tryRestoryPage()
                    })
                }
            })
            this.superclass.initComponent.call(me)
        },

        tryRestoryPage() {
            const me = this
            let hash = '' + window.location.hash
            if (hash && hash.indexOf('page=') > 0) {
                if (hash.startsWith('#')) {
                    hash = hash.substr(1)
                }
                if (hash) {
                    const {page} = qs.parse(hash)
                    if (page) {
                        // this.openScope(page)
                        me.fireEvent('restorypage', page)
                    }
                }
            }
        },

        changeHash(pageUrl) {
            window.location.hash = qs.stringify({page: pageUrl})
        },

        /**
         * 添加一个业务模块实例到选项卡
         * @param scopeInstance 业务对象实例
         * @param config ExtJS配置对象
         * @param panelInitCallback panel初始化之后会调用函数进行构造前的加工
         */
        addScope(scopeInstance, config, panelInitCallback) {
            scopeInstance.topScope = scopeInstance

            const me = this
            if (config.path) {
                for (let i = 0; i < this.items.items.length; i++) {
                    // 找到当前 tabs 里有没有已经打开过
                    const tab = this.items.items[i]
                    if (_.isEqual(tab.path, config.path)) {
                        // 激活
                        this.setActiveTab(tab);
                        return tab
                    }
                }
            }

            const newPanel = new Ext.panel.Panel({
                closable: true,
                ...config
            })
            if (typeof panelInitCallback === 'function') {
                panelInitCallback(newPanel)
            }

            // 添加业务模块
            const newTab = this.add(newPanel)
            this.setActiveTab(newTab);
            newTab.on({
                destroy(sender) {
                    me.changeHash('')
                    delete window['cp']
                }
            })

            return newTab
        }
    });

}