0

I'm trying to have a subtabpanel in a tab panel. I did red some answers but not quite understood :(

Here for example, how can I heva tab 3, 4 and 5 appears with a back button on top when I click on tab 3 ? (everything I did : Tab 1, 2 and 3 stays there...)

Thanks :)

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'
                }
            }
        ]
    }

});
4

1 に答える 1

0

あなたの場合、2つのタブパネルを一度にナビゲーションビューに押し込みます。ただし、初めて表示する必要があるのは最初のパネルだけです。このためには、最初のパネルのみをナビゲーションビューに追加する必要があります。ユーザーが最初のtabPanelで3番目のタブを選択した場合にのみ、ナビゲーションビューに追加する必要がある2番目のパネル。このためには、「acitveitemchange」イベントをリッスンし、3つのタブがアクティブになったことを確認する必要があります。次に、2番目のタブペインを押します。

この例を見てください

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 に答える