Sencha Touch Ext.TabPanel處理器

Question

我做了很多閱讀，但我無法弄清楚這一點。 這個程序使用煎茶觸摸2.0

我的 '應用' 具有分段按鈕

xtype: 'segmentedbutton' 

有了這個項目

{ 
text: 'Blog', 
scope: this, 
handler: this.makeYqlRequest 
} 

這是它做什麼

blog: { 
    query: "select * from rss where url='http://feeds.feedburner.com/extblog' limit 5", 
    tpl: Ext.create('Ext.XTemplate', [ 
     '<tpl if="item">', 
      '<tpl for="item">', 
       '<div class="blog-post">', 
        '<h3><a href="{link}" target="_blank">{title}</a></h3>', 
        '<p>{description}</p>', 
       '</div>', 
      '</tpl>', 
     '</tpl>' 
    ]) 
} 

該作品但現在我想使用Ext.TabPanel

，我有這個項目

{ 
title: 'Blog', 
iconCls: 'home', 
html: 'Blog Screen' 
} 

如何從分段按鈕讓處理器與Ext.TabPanel工作？ 我和一個聽衆玩了一下，但是我無法讓它工作。

有人能解釋這一點對我更多一點嗎？

謝謝！

Answer 1

您需要獲取對TabPanel的引用並調用[setActiveItem](http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-setActiveItem)，傳遞要激活的視圖或該視圖的索引。

簡單實例（可視here）：

Ext.setup({ 
    onReady: function() { 
     var tabPanel = Ext.create('Ext.tab.Panel', { 
      fullscreen: true, 
      items: [ 
       { 
        title: 'Home', 
        items: [ 
         { 
          xtype: 'toolbar', 
          items: [ 
           { 
            xtype: 'segmentedbutton', 
            items: [ 
             { 
              text: 'home' 
             }, 
             { 
              text: 'blog', 
              handler: function() { 
               // Using an index 
               tabPanel.setActiveItem(1); 
              } 
             }, 
             { 
              text: 'about', 
              handler: function() { 
               // Using a reference 
               var about = tabPanel.down('#about'); 
               tabPanel.setActiveItem(about); 
              } 
             } 
            ] 
           } 
          ] 
         }, 
         { 
          html: 'tap one of the above buttons to change the active tab.' 
         } 
        ] 
       }, 
       { 
        title: 'Blog', 
        html: 'blog' 
       }, 
       { 
        title: 'About', 
        itemId: 'about', 
        items: [ 
         { 
          xtype: 'toolbar', 
          docked: 'top', 
          items: [ 
           { 
            text: 'Go to home', 
            handler: function() { 
             // using the index 
             tabPanel.setActiveItem(0); 
            } 
           } 
          ] 
         } 
        ] 
       } 
      ] 
     }); 
    } 
});