PDA

View Full Version : Refresh icon next to tab panel title



kalya
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
29206

tvanzoelen
10 Nov 2011, 2:16 AM
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
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.

tobiu
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.

tvanzoelen
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) {
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;
}