Navigationview tabpanel，子tabpanel

Question

我正在尝试在标签面板中设置子标签面板。我做了一些答案，但不太明白:(

例如，当我点击标签3时，如何在顶部显示带有后退按钮的标签3,4和5？ （我所做的一切：标签1,2和3保留在那里......）

谢谢：）

Main.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);
        }

    }
});