導航視圖tabpanel，子tabpanel

Question

我想在選項卡面板中有一個子選項卡。我做了一些答案，但不是很明白:(

在這裏例如，我怎麼能heva選項卡3,4和5出現與頂部的後退按鈕，當我點擊標籤3？（我做的一切：表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); 
     } 

    } 
});