Listener to Tab Item點擊Sencha

Question

在我的應用程序中，我使用了一個包含5個項目的標籤面板。每個項目可在卡片佈局中添加大約6個面板。當我在選項卡項目的最後一個面板中時，我需要通過單擊底部的選項卡面板（與iOS中的常規選項卡視圖控制器有點類似）來返回到初始面板。我遇到了some solutions I found here，但它似乎只在切換標籤時才起作用。事實上，我想聽同一標籤圖標上的點擊事件。我怎樣才能做到這一點？

Answer 1

我已經解決了您的問題。我想這正是你想要的。希望這可以幫助。如果不是，請留下評論。

1）。 視圖（MyTabPanel1.js）

Ext.define('MyApp.view.MyTabPanel1', { 
    extend: 'Ext.tab.Panel', 
    config: { 

      scrollable: 'vertical', 
      items: 
      [ 
       { 
        xtype: 'panel', 
        id:'cardpanel1', 
        title: 'Tab1',    
        layout: 'card', 
         items: [ 
          { 
           html: "First Item", 
           items: 
           [ 
           { 
            xtype: 'button', 
            text: 'Forward', 
            handler: function() { 
            Ext.getCmp('cardpanel1').setActiveItem(1); 
            console.log('Going to Second Item'); 
            } 
           } 
           ] 
          }, 
          { 
           html: "Second Item", 
           items: 
           [ 
           { 
            xtype: 'button', 
            ui: 'confirm', 
            text: 'Go back', 
            handler: function() { 
            Ext.getCmp('cardpanel1').setActiveItem(0); 
            console.log('Going to First Item'); 
            } 
           } 
           ] 
          } 

         ]    

       }, 

       { 
        xtype: 'panel', 
        title: 'Tab2', 
        scrollable: true, 
        items: [ 
         { 
          xtype: 'button', 
          margin: 10, 
          ui: 'action', 
          text: 'Tab2' 
         } 

        ] 
       }, 
       { 
        xtype: 'panel', 
        title: 'Tab3', 
        scrollable: true, 
        items: [ 
         { 
          xtype: 'button', 
          margin: 10, 
          ui: 'action', 
          text: 'Tab3' 
         } 
        ] 
       } 

      ] 
     } 

    }); 

2）。 控制器（MainController.js）

Ext.define('MyApp.controller.MainController', { 
     extend: 'Ext.app.Controller', 
     config: { 
      control: { 

       "tabpanel #ext-tab-1":{ //ext-tab-1 is the id for the 1st tab generated by Sencha 
        tap: 'ontap' 
       }    
      } 
     }, 

     ontap: function(){ 
     console.log('inside controller'); 
     Ext.getCmp('cardpanel1').setActiveItem(0); 
     } 

    }); 

Answer 2

我想給一個更簡單的解決

這是我的觀點叫做視口這是一個的TabPanel：

Ext.define('Sencha.view.iphone.Viewport',{ 
      extend: 'Ext.TabPanel', 
      xtype: 'newviewport', 
      alias: 'widget.newTabPanel', 

在我的控制器文件

現在：

Ext.define('Sencha.controller.iphone.main', { 
     extend: 'Ext.app.Controller', 
     config: 
     { 
     refs: { 
     theMainTabPanelTabbarTab: 'newTabPanel > tabbar > tab', //this the tab of the tabpanel, if we listen to it that way we will know of tab panel tap. 
     }, 
     control: { 
     theMainTabPanelTabbarTab:{ 
     tap: 'onTapMainTabPanel' 
     } 
} 

這是一個工作代碼，我和很好。希望這會幫助你。