Refresh icon next to tab panel title

[kalya]

Hi guys!

Is there a simple way to add refresh icon next to tab panel title (in tan panel header)? I want this icon to refresh entire data if this panel. Now i have tbar with this logic, but i need to transfer this button to tab panel
header. It needs to be like this - 'Banner stats ' and refresh icon. Thanks for any help
tbar.jpg

[tvanzoelen]

Do you mean something like this?

On tabpanel render you do something like

tabPanel.tabBar.add({
                        xtype: 'button',
                        iconAlign: 'right',
                        text: 'refresh',
                        handler: function(b) {
                            //your refresh action
                        }
                    });

[kalya]

it is adding a new button after all tabs. But i need to have icons on each tab's header. so 6 tabs = 6 icons on each tab.

[tobiu]

i would take a look on how the close-button for tabs is implemented and do it similar with your reload button. this behaviour is not baked into the framework.

[tvanzoelen]

Then you must do something like this. put the tabConfig on each panel you add to the tabpanel.

tabConfig: {
                            title: 'tabtitle',
                            listeners: {
                                render: {
                                    fn: function(e) {
                                        e.el.createChild({
                                            tag: 'a',
                                            cls: 'refreshclass',
                                            href: '#',
                                            title: 'refresh'
                                        }).on('click', function(e) { alert('click'); });
                                        e.ownerCt.doLayout();
                                    }
                                }
                            }

                        },

refresh css, taken from close tabbtn

.refreshclass {
    background: url("urltorefreshicon.gif") no-repeat scroll 0 0 transparent;
    font-size: 0;
    height: 11px;
    line-height: 0;
    opacity: 0.6;
    position: absolute !important;
    right: 3px;
    text-indent: -999px;
    top: 3px;
    width: 11px;
}