TabPanel: Right align some tabs

[irata]

Hi,

is there a way to render some tabs in a TabPanel "right-aligned"?
I want the main tabs on the left side, but two tabs with a distance to the others on the right side of the panel.
Example:
[Tab1][Tab2][Tab3] <SPACER> [Right1][Right2]

Thanks for your help!

Regards, Tobias

[Condor]

Example:

<style type="text/css">
	ul.x-tab-strip li.right-tab {float: right;}
</style>
<script type="text/javascript">
Ext.onReady(function() {
	new Ext.Viewport({
		layout: 'fit',
		items: {
			xtype: 'tabpanel',
			items: [{
				title: 'Tab 1'
			},{
				title: 'Tab 2'
			},{
				title: 'Tab 3'
			},{
				title: 'Right 2',
				tabCls: 'right-tab'
			},{
				title: 'Right 1',
				tabCls: 'right-tab'
			}],
			listeners: {
				afterlayout: function(c){
					c.strip.setWidth(c.stripWrap.getWidth() - 2);
				}
			}
		}
	});
});
</script>

[irata]

That's it! ;-)

Thank you very much!!!

[Mandeep]

Can somebody please suggest how to do this in Ext 4.1.0?

Thanks.

[maosim]

Hi,
I'm having this problem in Ext 4.1.1 as well. is there a fix?
Thank you

[maosim]

Hello,
How do i right align the tab buttons in this version. the answer from thread
http://www.sencha.com/forum/showthre...s-in-tab-panel
isn't working for me.

[CODE]

<style type="text/css"> .my-tab {position: relative !important; float: right!important;
right:0px!important;
} .webui-centerpanel .header-tabs.x-tab-bar .x-tab {
position: relative !important;
float: right;
left: auto !important;
margin: 0 2px 0 0 !important;
border-color: #B5B5B5;
}
.webui-centerpanel .header-tabs.x-tab-bar .x-tab-bar-body {
height: 22px;
border: 0 none;
}
.webui-centerpanel .header-tabs .x-tab-bar-strip {
border-color: #b5b5b5;
background: none transparent !important;
border-width: 1px 0 0;
top: 24px;
}
</style><script type="text/javascript">Panel = Ext.create( 'Ext.panel.Panel',{
id: 'centerPanel',
cls: 'webui-centerpanel',
layout: 'fit',
items: [{
xtype: 'Ext.tab.Panel',
id: 'tab-panel',
itemCls: 'my-tab',
bodyCls: 'header-tabs-body',
layout: 'fit',
border: 0,
bodyBorder: false,
tabBar: {
height: 25
},
//toolbar
tbar: /*.....*/
}),
componentCls: 'my-tab',
items:[{
//right align tab
title: 'Configuration',
id: 'config-tab',
tabCls: 'my-tab'
}],
listeners: {
beforetabchange: function(tp, newTab, currentTab){
if (newTab.id == 'centerPanel-bctoolbar')
return false;
if (newTab.id == 'config-tab') {
CP.global.activeTab = CP.global.config;
}
if (newTab.id == 'monitor-tab') {
CP.global.activeTab = CP.global.monitor;
}
}
}
},{
//another panel
...
}]


Thank you for your help!
Regards
Tanya

[adambuckley]

As one of your tabpanel items. All following tabpanel items will be right-aligned.

{    // Fill all available space
    tabConfig : {
        xtype : 'tbfill'
    }
}

[rupamkhaitan]

xtype: 'tabpanel',
tabBar : {
layout : {
pack : 'end'
}
},

[amryounis]

dear... when i tried the right align through "float:righ", the tab title simply disappear.

[rupamkhaitan]

Just use

layout : {
pack : 'end'
}