Sencha Touch Ext.TabPanelハンドラー

Question

私は多くの読書をしましたが、私はこれを理解できません。 このアプリは、これはそれが

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

この作品を何である2.0

私の 'アプリ' はこの項目

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

でセグメント化されたボタン

xtype: 'segmentedbutton' 

を持つ煎茶タッチを使用しています私は今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); 
            } 
           } 
          ] 
         } 
        ] 
       } 
      ] 
     }); 
    } 
});