Sencha Touch Ext.TabPanel handler

Question

J'ai fait beaucoup de lecture mais je ne peux pas comprendre cela. Cette application utilise Sencha tactile 2.0

My 'app' a un bouton segmentée

xtype: 'segmentedbutton' 

Avec cet article

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

C'est ce qu'il fait

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

Cela fonctionne wel mais maintenant je veux utiliser le Ext.TabPanel

Et j'ai cet article

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

Comment puis-je obtenir le gestionnaire à partir du bouton segmentée pour travailler avec le Ext.TabPanel? J'ai joué un peu avec un auditeur mais je n'arrive pas à le faire fonctionner.

Quelqu'un peut-il m'expliquer un peu plus à ce sujet?

Merci!

Answer 1

Vous devrez obtenir une référence à votre TabPanel et appeler le [setActiveItem](http://docs.sencha.com/touch/2-0/#!/api/Ext.Container-method-setActiveItem), en passant la vue que vous voulez activer, ou l'index de cette vue.

Exemple simple (visible 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); 
            } 
           } 
          ] 
         } 
        ] 
       } 
      ] 
     }); 
    } 
});