PDA

View Full Version : Always show the tab scrollers in a tabpanel?



shinkenno
12 Dec 2012, 7:26 AM
Hi,

I want to know if there is a (simple) way to force the showing of the tab scrollers in a tabpanel, even when there is enough room for all the tabs (in this case, the scrollers will be disabled).

Thank you!

Arnaud

shinkenno
12 Dec 2012, 7:59 AM
Found it!

Just create an overriding for the 'autoScrollTabs' function of Ext.TabPanel, by replacing:

if(count == 0 || l <= tw)

by

if(count == 0)
(no condition on the tabs length)


Edit: A better solution is to override Ext.TabPanel by adding a new parameter I called 'forceTabScroll':

// Add new parameter to force the display of the tab scrollers
Ext.override(Ext.TabPanel, {

/**
* @cfg {Boolean} forceTabScroll True to always enable scrolling to tabs even if all tabs are visible.
Only available with tabPosition:'top' (defaults to false).
*/
forceTabScroll : false,

// private
autoScrollTabs : function(){

this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
var count = this.items.length,
ow = this.pos.dom.offsetWidth,
tw = this.pos.dom.clientWidth,
wrap = this.stripWrap,
wd = wrap.dom,
cw = wd.offsetWidth,
pos = this.getScrollPos(),
l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;


if(!this.enableTabScroll || cw < 20){
return;
}

if(count == 0 || ((l <= tw) && (!this.forceTabScroll))){ // CHANGE !
wd.scrollLeft = 0;
wrap.setWidth(tw);
if(this.scrolling){
this.scrolling = false;
this.pos.removeClass('x-tab-scrolling');
this.scrollLeft.hide();
this.scrollRight.hide();
if(Ext.isAir || Ext.isWebKit){
wd.style.marginLeft = '';
wd.style.marginRight = '';
}
}
}else{
if(!this.scrolling){
this.pos.addClass('x-tab-scrolling');
if(Ext.isAir || Ext.isWebKit){
wd.style.marginLeft = '18px';
wd.style.marginRight = '18px';
}
}
tw -= wrap.getMargins('lr');
wrap.setWidth(tw > 20 ? tw : 20);
if(!this.scrolling){
if(!this.scrollLeft){
this.createScrollers();
}else{
this.scrollLeft.show();
this.scrollRight.show();
}
}
this.scrolling = true;
if(pos > (l-tw)){
wd.scrollLeft = l-tw;
}else{
this.scrollToTab(this.activeTab, false);
}
this.updateScrollButtons();
}
}
});


You may now declare your tabpanel as:


var myTabPanel = new Ext.TabPanel({
...,
enableTabScroll: true,
forceTabScroll: true, // New parameter
items: [{
title: 'Tab 1',
html: 'content tab 1'
},{
title: 'Tab 2',
html: 'content tab 2'
}]


});


Hope this will help someone else...