0

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

例如,在这里,当我单击选项卡 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'
                }
            }
        ]
    }

});
4

1 回答 1

0

在您的情况下,您一次将两个选项卡面板推送到导航视图中。但是第一次你只需要显示第一个面板。为此,您只需将第一个面板添加到导航视图中。仅当用户在第一个 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);
        }

    }
});
于 2012-09-17T08:18:39.307 回答