在Sencha touch中添加Ext.TabPanel中的刷新按鈕

Question

如何在同一個Ext.TabPanel中添加一個按鈕（刷新按鈕）。宓代碼是在這裏：

Ext.define('myApp.view.Twitter',{ 
    extend: 'Ext.TabPanel', 
    xtype: 'twitter', 


    config: { 
    title:'Twitter', 
    iconCls: 'twitter2', 

styleHtmlContent: true, 
items: [ 
    { 
     title: 'Twitts', 
     html: 'Lista de twitts' 
    }, 
    { 
     title: 'Mapa', 
     html: 'Lugar de twitts' 
    } 
] 

} }）;

Answer 1

解決方案：

Ext.define('portofolio.view.Twitter',{ 
    extend: 'Ext.TabPanel', 
    xtype: 'twitter', 


    config: { 
    title:'Twitter', 
    iconCls: 'twitter2', 

    styleHtmlContent: true, 
    tabBar:{ 
      dockedItems:[{ 
       xtype: 'button', 
       iconMask: true, 
       dock: 'right', 
       ui: 'action', 
       stretch: false, 
       style: 'height:35px;margin-top:5px;', 
       handler: function(){ 
        alert('Refresh panel');  
       } 
      }] 
     }, 
      items: [ 
       { 
        iconCls: 'refresh', 

       }, 
       {  
        title: 'Twitts', 
        html: 'Aqui van los twitts' 
       }, 
       {     
        title: 'Mapa', 
        html: 'Aqui encuntras el oro' 
       }   
      ] 
     }, 
}); 

Answer 2

你只需要1個更多的項目添加到您的tab panel：

items: [ 
    { 
     title: 'Twitts', 
     html: 'Lista de twitts' 
    }, 
    { 
     title: 'Mapa', 
     html: 'Lugar de twitts' 
    }, 
    { 
     iconCls: 'refresh', 
     title: 'Refresh', 
     html: 'Refresh' 
    } 
] 

請注意，如果你使用2.0版本，你會不會，除非你tabbar停靠在底部能看到的圖標圖像。你應該沒問題，如果這是版本2.1

Answer 3

我假設，通過刷新按鈕，你想刷新tabPanel內顯示的數據。您可以使用toolbar並設置在整個應用程序中可能有用的不同按鈕。我已經設置了這個工作fiddle。它在右上角有refresh按鈕。

希望有所幫助。我也在這裏加入代碼 -

launch: function() { 
     var view = Ext.create('Ext.Container', { 
      fullscreen: true, 
      layout: { 
       type: 'vbox' 
      }, 
      items: [ 
       { 

        xtype:'toolbar', 
        docked:'top', 
        layout:{ 
         type: 'vbox', 
         pack:'center', 
         align: 'right' 
        }, 
        flex:1, 
        items:[ 
         { 
          xtype:'button', 
          iconMask:true, 
          iconCls:'refresh', 

          handler:function(){ 
           console.log('Refresh Button Tapped'); 
           alert('Refresh Button Tapped'); 
          } 
         } 
        ] 

       }, 
       { 
        xtype:'panel', 
        layout:'fit', 
        flex:2, 
        items:[ 
         { 
          xtype:'tabpanel', 
          tabBarPosition:'bottom', 
          defaults:{ 
           styleHtmlContent:true 
          }, 
          items:[ 
           { 
            title: 'Twitts', 
            iconCls: 'home', 
            html: 'Lista de twitts' 
           }, 
           { 
            title: 'Mapa', 
            iconCls: 'maps', 
            html: 'Lugar de twitts' 
           } 
          ] 
         } 
        ] 
       } 
      ] 
     }); 
    }