PDA

View Full Version : Right-align tabs in a TabPanel



Darshan5
19 Jun 2012, 9:54 AM
Hi, is it possible to right align tabs in a tabpanel? The tabPosition (http://docs.sencha.com/ext-js/4-1/#%21/api/Ext.tab.Panel-cfg-tabPosition) config property only allows "top" or "bottom". I want all my tabs to be on the top right. Searched everywhere but could not find a solution.

Its my first post on Sencha forums, please guys help me out here! Thanks

scottmartin
23 Jun 2012, 4:30 PM
Please try the following:



.x-tab {
position:initial !important;
float:right;
}​


36482

Scott.

Animal
23 Jun 2012, 11:16 PM
Actually, you should be able to configure your tabpanel with




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


But it does not work. I will add a ticket for this for 4.1.2

Animal
25 Jun 2012, 2:50 AM
Hmm. My solution packs them on the right, but the order of the tabs is still right->left. New tabs are added on the right.

Before I go ahead an implement this, what is the consensus on this? Is that what is wanted generally? Or should the tabs actually start on the right and new ones be added going leftwards?

Darshan5
25 Jun 2012, 3:16 AM
Thanks for your reply. I do not plan to add new tabs, so packing the tabs on the right would be great but the order should be left-right.

Darshan5
25 Jun 2012, 3:17 AM
Please try the following:



.x-tab {
position:initial !important;
float:right;
}​


36482

Scott.

This did not work, for some strange reason "position:initial !important;" is not being applied.

Animal
25 Jun 2012, 3:50 AM
It's browser-dependent.

Your workaround is



Ext.override(Ext.tab.Bar, {
initComponent: function() {
var me = this;

if (me.plain) {
me.setUI(me.ui + '-plain');
}

me.addClsWithUI(me.dock);

me.addEvents(
/**
* @event change
* Fired when the currently-active tab has changed
* @param {Ext.tab.Bar} tabBar The TabBar
* @param {Ext.tab.Tab} tab The new Tab
* @param {Ext.Component} card The card that was just shown in the TabPanel
*/
'change'
);

// Element onClick listener added by Header base class
me.callParent(arguments);
Ext.merge(me.layout, me.initialConfig.layout);

// TabBar must override the Header's align setting.
me.layout.align = (me.orientation == 'vertical') ? 'left' : 'top';
me.layout.overflowHandler = new Ext.layout.container.boxOverflow.Scroller(me.layout);

me.remove(me.titleCmp);
delete me.titleCmp;

Ext.apply(me.renderData, {
bodyCls: me.bodyCls
});
}
});


Then you can use the config I suggested in post 3

Darshan5
25 Jun 2012, 4:08 AM
This works great, thanks!