View Full Version : Refresh icon next to tab panel title

10 Nov 2011, 2:05 AM
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

10 Nov 2011, 2:16 AM
Do you mean something like this?

On tabpanel render you do something like

xtype: 'button',
iconAlign: 'right',
text: 'refresh',
handler: function(b) {
//your refresh action

10 Nov 2011, 4:13 AM
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.

10 Nov 2011, 4:35 AM
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.

10 Nov 2011, 4:59 AM
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) {
tag: 'a',
cls: 'refreshclass',
href: '#',
title: 'refresh'
}).on('click', function(e) { alert('click'); });


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;