javascript - extJS - 以编程方式添加新选项卡后无法在选项卡之间切换

Question

我正在以编程方式向选项卡面板添加选项卡。以编程方式添加多个选项卡后，我无法在它们之间切换。尝试了不同的解决方案，但仍然无法弄清楚我做错了什么这是我的标签面板:

Ext.define('Medlemssystem.view.MyViewport', {
    extend: 'Ext.container.Viewport',

    requires: [
        'Medlemssystem.view.MainTab.MainTab',
        'Ext.toolbar.Toolbar',
        'Ext.toolbar.Fill',
        'Ext.tab.Panel',
        'Ext.tab.Tab'
    ],

    border: false,
    cls: 'body',
    layout: 'border',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'panel',
                    region: 'center',
                    border: false,
                    layout: 'border',
                    title: '',
                    dockedItems: [
                        {
                            xtype: 'toolbar',
                            region: 'north',
                            cls: 'mainDockBar',
                            dock: 'top',
                            border: false,
                            height: 33,
                            items: [
                                {
                                    xtype: 'tbfill'
                                },
                                {
                                    xtype: 'button',
                                    text: 'Hjelp',
                                    style: 'color: red;',
                                    listeners: {
                                        click: {
                                            fn: me.onHelpBtnCLick,
                                            scope: me
                                        }
                                    }
                                },
                                {
                                    xtype: 'button',
                                    text: 'Logg ut',
                                    listeners: {
                                        click: {
                                            fn: me.onButtonClick1,
                                            scope: me
                                        }
                                    }
                                }
                            ]
                        }
                    ],
                    items: [
                        {
                            xtype: 'tabpanel',
                            region: 'center',
                            frame: true,
                            id: 'tabs',
                            itemId: 'mainTabPanel',
                            manageHeight: false,
                            items: [
                                {
                                    xtype: 'mainTab'
                                }
                            ],

                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    },

    onButtonClick1: function(button, e, eOpts) {

        window.location = "LogOutServlet";

    },

    onHelpBtnCLick: function(button, e, eOpts) {

        var url = "help";
        var win = window.open(url, '_blank');
        win.focus();

    }

});

这是我添加新标签的方法:

var tabs = dataview.up('#mainTabPanel');

        var newTab = Ext.create('Medlemssystem.view.MemberInfoTab.MemberInfoPanel',
            {
                title: record.get('firstName') + ' ' + ' ' + record.get('lastName'),
            })
        var active = tabs.add(newTab);

        tabs.setActiveTab(active);

这是我添加的标签:

Ext.define('Medlemssystem.view.MemberInfoTab.MemberInfoPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.memberInfoPanel',

    requires: [
        'Medlemssystem.view.MemberInfoTab.MemberDetailsPanel',
        'Medlemssystem.view.MemberInfoTab.OrgInfoPanel',
        'Ext.panel.Panel'
    ],

    cls: 'memberTab',
    id: 'memberTab1',
    itemId: 'memberTab',
    layout: 'border',
    closable: true,

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'memberDetailsPanel',
                    itemId: 'infoPanel',
                    flex: 1,
                    region: 'west'
                },
                {
                    xtype: 'memberOrgInfoPanel',
                    flex: 2,
                    region: 'center'
                }
            ],
            listeners: {
                beforerender: {
                    fn: me.onMemberTab1BeforeRender,
                    single: true,
                    scope: me
                },
                afterrender: {
                    fn: me.onMemberTab1AfterRender,
                    single: true,
                    scope: me
                }
            }
        });

        me.callParent(arguments);
    },

    onMemberTab1BeforeRender: function(component, eOpts) {

    },
    onMemberTab1AfterRender: function(component, eOpts) {

    }

});

有什么建议吗？

Answer 1

我没有运行您的代码，但这可能是因为 ids 不唯一。请勿使用任何 ID，仅在需要时才使用 itemIds。此外，请注意容器中的 itemId 是唯一的，例如，一个选项卡面板中不能有多个具有相同 itemId 的选项卡。