Question

如何在同一个Ext.TabPanel中再添加一个按钮（刷新按钮）。 Mi代码在这里：

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

您只需在tab panel添加1个项目：

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 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并设置在整个应用中可能有用的不同按钮。我已经设置了这个工作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'
                                }
                            ]
                        }
                    ]
                }
            ]
        });
    }

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

3 个答案: