Sencha Touch 2 Ajouter une barre de navigation ci-dessous Carousel

Question

J'ai utilisé ce lien pour commencer avec Sencha: http://www.sencha.com/learn/getting-started-with-sencha-touch-2/

Mon main.js est la suivante:

Ext.define("epiduo_ped.view.Main", 
{ 
    extend: 'Ext.Carousel', 
    requires: 
    [ 
     'Ext.TitleBar', 
     'Ext.Video' 
    ], 

    config: 
    { 
     tabBarPosition: 'bottom', 

     items: 
     [ 
      { 
      xtype: 'homepanel' 

      }, 
      { 
      xtype: 'page1panel' 
      } 
     ] 
    } 
}); 

J'ai modifié mes pages d'étendre Ext. Carrousel au lieu de Ext.Panel. Cela a fonctionné autant que permettre le balayage, cependant, maintenant je n'ai pas une barre de navigation sur le fond avec des boutons pour basculer entre les pages, ce qui est logique parce que je ne prolonge pas Ext.tab.panel plus. Y a-t-il une manière intégrée dans Sencha d'avoir les deux ou est-ce coutume où je dois ajouter mon propre html pour ajouter une barre de navigation sur le fond? De toute façon, je ne suis pas sûr de savoir comment faire cela. En d'autres termes: J'ai besoin d'un carrousel de 3 pages pour que l'utilisateur puisse glisser entre eux ET en même temps ajouter la possibilité pour l'utilisateur d'utiliser les boutons sur le Tabarre pour basculer entre les pages du carrousel.

Answer 1

Ok Je voulais poster la réponse pour quelqu'un d'autre qui luttait avec cette tâche. Fondamentalement, son un carrousel avec barre d'outils en bas:

http://www.sencha.com/forum/showthread.php?228733-Control-Carousel-with-Tabbar&s=3e485e109a9b06e351a1429469603273

Vous juste besoin de votre barre d'outils et le style des icônes avec Sencha « thématisation »

http://docs.sencha.com/touch/2-0/#!/guide/theming

Answer 2

Il suffit de garder votre Ext.tab.Panel et ajoutez le carrousel à l'intérieur:

Ext.define("epiduo_ped.view.Main", 
{ 
    extend: 'Ext.tab.Panel', 
    requires: 
    [ 
     'Ext.TitleBar', 
     'Ext.Video' 
    ], 

    config: 
    { 
     tabBarPosition: 'bottom', 
     fullscreen: true, 

     items: [{ 
      title: 'Home', 
      iconCls: 'home', 
      html: 'Home Screen' 
     },{ 
      title: 'Contact', 
      iconCls: 'user', 
      xtype:'carousel', 
      items: [{ 
       html : 'Item 1', 
      },{ 
       html : 'Item 2', 
      },{ 
       html : 'Item 3' 
      }] 
     }] 
    } 
}); 

Hope this helps.