javascript - Navigationview 标签面板、子标签面板

Question

我试图在标签面板中有一个子标签面板。我做了一些答案，但不太明白:(

例如，在这里，当我单击选项卡 3 时，如何显示选项卡 3、4 和 5 并在顶部显示一个后退按钮？（我所做的一切：标签 1、2 和 3 都留在那里......）

谢谢 ：）

主.js：

Ext.define('MyApp.view.MyNavigationView', {
    extend: 'Ext.navigation.View',

    config: {
        ui: 'light',
        items: [
            {
                xtype: 'tabpanel',
                title: 'MyTabPanel1',
                layout: {
                    animation: 'fade',
                    type: 'card'
                },
                items: [
                    {
                        xtype: 'container',
                        title: 'Tab 1',
                        iconCls: 'info'
                    },
                    {
                        xtype: 'container',
                        title: 'Tab 2',
                        iconCls: 'info'
                    },
                    {
                        xtype: 'container',
                        title: 'Tab 3',
                        iconCls: 'info'
                    }
                ],
                tabBar: {
                    docked: 'bottom'
                }
            },
            {
                xtype: 'tabpanel',
                title: 'MyTabPanel',
                items: [
                    {
                        xtype: 'container',
                        title: 'Tab 3',
                        iconCls: 'info'
                    },
                    {
                        xtype: 'container',
                        title: 'Tab 4',
                        iconCls: 'info'
                    },
                    {
                        xtype: 'container',
                        title: 'Tab 5',
                        iconCls: 'info'
                    }
                ],
                tabBar: {
                    docked: 'bottom'
                }
            }
        ]
    }

});

Answer 1

在您的情况下，您一次将两个选项卡面板推送到导航视图中。但是第一次你只需要显示第一个面板。为此，您只需将第一个面板添加到导航视图中。仅当用户在第一个 tabPanel 上选择第三个选项卡时，您才需要将第二个面板添加到导航视图。为此，您应该收听“acitveitemchange”事件并确定超过 3 个选项卡变为活动状态。然后按第二个选项卡窗格。

看这个例子

Ext.define('MyApp.view.MyNavigationView', {
    extend: 'Ext.navigation.View',

    config: {
        ui: 'light',
        autoDestroy: false

    },

    constructor : function(){
        this.callParent(arguments);

        this.firstTabPanel = Ext.create('Ext.tab.Panel',{
            title: 'MyTabPanel1',
            layout: {
                animation: 'fade',
                type: 'card'
            },
            items: [
                {
                    xtype: 'container',
                    title: 'Tab 1',
                    iconCls: 'info',
                    html : 'TAB 1'
                },
                {
                    xtype: 'container',
                    title: 'Tab 2',
                    iconCls: 'info',
                    html : 'TAB 2'
                },
                {
                    xtype: 'container',
                    title: 'Tab 3',
                    iconCls: 'info',
                    html : 'TAB 3'
                }
            ],
            tabBar: {
                docked: 'bottom'
            }
        });

        this.secondTabPanel = Ext.create('Ext.tab.Panel',{
            title: 'MyTabPanel',
            items: [
                {
                    xtype: 'container',
                    title: 'Tab 3',
                    iconCls: 'info',
                    html : 'TAB 3'
                },
                {
                    xtype: 'container',
                    title: 'Tab 4',
                    iconCls: 'info',
                    html : 'TAB 4'
                },
                {
                    xtype: 'container',
                    title: 'Tab 5',
                    iconCls: 'info',
                    html : 'TAB 5'
                }
            ],
            tabBar: {
                docked: 'bottom'
            }
        });

        this.firstTabPanel.on('activeitemchange', this.tabPanel1ActiveItemChange, this);

        //show first tab panel
        this.push(this.firstTabPanel);
    },

    tabPanel1ActiveItemChange : function(tabpanel, newtab){
        //if newtab is third tab than show second tab panel
        if(this.firstTabPanel.getInnerItems().indexOf(newtab)=== 2){
            this.push(this.secondTabPanel);
        }

    }
});