button - 在 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

您只需要再添加 1 个项目到您的tab panel:

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

tabbar请注意，如果您使用的是 2.0 版，除非您停靠在底部，否则您将无法看到图标图像。如果这是 2.1 版应该没问题

Answer 2

解决方案：

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 3

我假设，通过刷新按钮，你想刷新里面显示的数据tabPanel。您可以使用toolbar和设置可能在整个应用程序中有用的不同按钮。我已经设置了这个工作小提琴。它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'
                                }
                            ]
                        }
                    ]
                }
            ]
        });
    }