TabPanelとTabBarの違い

Question

ちょっと私はSencha Touchで作業を始めています。私が読んだチュートリアルやドキュメンテーションが役に立つと感じています。私は理解しようとしている：タブバーとタブパネルの違いとそれらを使用する場合

例えば、私はリスト項目を持つインデックスパネルを持っている、一度誰かがクリックすると、それは下部にタブバーを持つページに行く。タブバーまたはタブパネルのある新しいパネルを使用すると思いますか？

Answer 1

私も同様の作業をしていましたが、以下のコードをチェックしてください。 TabPanelとTabBarの違いについては、TabBarはタブボタンの表示と操作に使用されるTabPanelの単なるコンポーネントであるようです。

以下のコードのリストの一部）は、フォーム煎茶タッチAPIをList

Ext.setup({ 
onReady: function() { 
    Ext.regModel('Contact', { 
     fields: ['firstName', 'lastName'] 
    }); 

    var store = new Ext.data.JsonStore({ 
     model : 'Contact', 
     sorters: 'lastName', 

     getGroupString : function(record) { 
      return record.get('lastName')[0]; 
     }, 

     data: [ 
      {firstName: 'Tommy', lastName: 'Maintz'}, 
      {firstName: 'Rob',  lastName: 'Dougan'}, 
      {firstName: 'Ed',  lastName: 'Spencer'} 
     ] 
    }); 

    var tabPanel = new Ext.TabPanel({ 

     tabBar:{ 
      dock: 'bottom', // will put the menu on the bottom of the screen 
      layout:{ 
       pack: 'center' // this will center the menu 
      } 
     }, 
     items:[ 
      { 
       title: 'tab 1', 
       html: 'TAB 1', 
       iconCls: "home" 
      }, 
      { 
       title: 'tab 2', 
       html: 'TAB 2', 
       iconCls: "bookmarks", 
      } 
     ] 

    }); 
    var list = new Ext.List({ 
     itemTpl : '{firstName} {lastName}', 
     grouped : true, 
     indexBar: true, 

     store: store, 

     listeners: { 
      itemtap:function (subList, subIdx, el, e) { 
       console.log(subList, subIdx, el, e); 

       var store = subList.getStore(), 
         record = store.getAt(subIdx); 

       if (record) { 
        mainPanel.setActiveItem(tabPanel, 'slide'); 
       } 
      }} 
    }); 

    // Main panel viewport 
    var mainPanel = new Ext.Panel({ 
     fullscreen: true, 
     layout: 'card', 

     items:[list] 
    }); 
    mainPanel.show(); 
} 

}を取られています。

Answer 2

tabPanelだけで操作できます。 tabBar プロパティをdock：bottomと追加します。 アイテムリストのオブジェクトの場合は、ボタンに名前とアイコンが表示されるようにタイトルとiconClsを追加します。