我正在使用ExtJS 7.5 Modern Toolkit。我最初在经典工具包中开发了一个使用路由器的应用程序，基于下面显示的示例，使用路由器并在选项卡面板上侦听选项卡更改事件。我们决定更改为应用程序的现代工具箱，但我似乎不知道如何复制选项卡更改行为，因为选项卡更改事件似乎在现代工具箱中不存在。
我能找到的最接近的东西是activeitemchange事件，但在使用路由时这会成为一个问题，因为在处理路由时，我需要更新激活的选项卡，该选项卡会触发该事件，随后会导致另一个路由重定向。选项卡更改事件不受设置活动项的影响，似乎只受实际单击/触摸另一个选项卡的影响。
经典工具箱中的示例：

Ext.define('Router.controller.Navigation', {
    extend: 'Ext.app.Controller',

    config: {
        control: {
            '#main-tabs': {
                tabchange: 'onTabChange'
            },
            '#tab6': {
                tabchange: 'onChildTabChange'
            }
        },
        refs: {
            tabPanel: '#main-tabs'
        },
        routes: {
            'main-tabs:id:subid': {
                action: 'showTab',
                before: 'beforeShowTab',
                conditions: {
                    // take control of the :id & :subid parameters, make them optional but delimited by colon
                    ':id': '(?:(?::){1}([%a-zA-Z0-9\-\_\s,]+))?',
                    ':subid': '(?:(?::){1}([%a-zA-Z0-9\-\_\s,]+))?'
                }
            }
        }
    },

    onTabChange: function(tabPanel, newItem) {
        var id = newItem.getId(),
            child = newItem.child('tabpanel'),
            subid = '',
            hash = 'main-tabs:' + id;

        if (child) {
            newItem = child.getActiveTab();
            subid = ':' + newItem.getId();

            hash += subid;
        }

        this.redirectTo(hash);
    },

    onChildTabChange: function(tabPanel, newItem) {
        var parentTab = tabPanel.up(),
            parentId = parentTab.getId(),
            hash = 'main-tabs:' + parentId + ':' + newItem.getId();

        this.redirectTo(hash);
    },

    beforeShowTab: function(id, subid, action) {
        var tabPanel = this.getTabPanel(),
            child;

        if (!id) {
            // no id was specified, use 0 index to resolve child
            id = 0;
        }

        child = tabPanel.getComponent(id);

        if (child) {
            // tab found, resume the action
            action.resume();
        }
        else {
            Ext.Msg.alert('Tab Not Found', 'Tab with id or index "<b>' + id + '</b>" was not found!');

            // child not found, stop action
            action.stop();
        }
    },

    showTab: function(id, subid) {
        var tabPanel = this.getTabPanel(),
            child, childTabPanel;

        if (!id) {
            // no id was specified, use 0 index to resolve child
            id = 0;
        }

        child = tabPanel.getComponent(id);

        childTabPanel = child.child('tabpanel');

        tabPanel.setActiveTab(child);

        if (childTabPanel) {
            if (!subid) {
                subid = 0;
            }

            childTabPanel.setActiveTab(subid);
        }
    }
});

Ext.application({
    name: 'Router',

    requires: [
        'Ext.tab.Panel',
        'Ext.window.MessageBox'
    ],

    controllers: [
        'Navigation'
    ],

    defaultToken: 'main-tabs',

    launch: function() {

        Ext.create('Ext.tab.Panel', {
            renderTo: Ext.getBody(),
            id: 'main-tabs',
            height: 300,
            width: 600,
            activeTab: 0,
            defaults: {
                padding: 10
            },
            items: [
                {
                    title: 'Tab 1',
                    id: 'tab1',
                    layout: 'fit',
                    items: [
                        {
                            xtype: 'tabpanel',
                            id: 'tab6',
                            items: [
                                {
                                    title: 'Sub-tab 1',
                                    id: 'subtab1'
                                },
                                {
                                    title: 'Sub-tab 2',
                                    id: 'subtab2'
                                },
                                {
                                    title: 'Sub-tab 3',
                                    id: 'subtab3'
                                }
                            ]
                        }
                    ]
                },
                {
                    title: 'Tab 2',
                    id: 'tab2',
                    html: 'Tab 2 content'
                },
                {
                    title: 'Tab 3',
                    id: 'tab3',
                    html: 'Tab 3 content'
                },
                {
                    title: 'Tab 4',
                    id: 'tab4',
                    html: 'Tab 4 content'
                },
                {
                    title: 'Tab 5',
                    id: 'tab5',
                    html: 'Tab 5 content'
                }
            ]
        });

    }
});