PDA

View Full Version : autoscrolling bottom tabs



jmcneese
25 Nov 2008, 3:12 PM
not so much an extension or plugin, but i know there are a few people wondering how to make this work. this works for me:



Ext.override(Ext.TabPanel, {
autoScrollTabs : function(){
this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
var count = this.items.length;
var ow = this.pos.dom.offsetWidth;
var tw = this.pos.dom.clientWidth;

var wrap = this.stripWrap;
var wd = wrap.dom;
var cw = wd.offsetWidth;
var pos = this.getScrollPos();
var l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;

if(!this.enableTabScroll || count < 1 || cw < 20){ // 20 to prevent display:none issues
return;
}
if(l <= tw){
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){
wd.style.marginLeft = '';
wd.style.marginRight = '';
}
}
}else{
if(!this.scrolling){
this.pos.addClass('x-tab-scrolling');
if(Ext.isAir){
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)){ // ensure it stays within bounds
wd.scrollLeft = l-tw;
}else{ // otherwise, make sure the active tab is still visible
this.scrollToTab(this.activeTab, false);
}
this.updateScrollButtons();
}
},

createScrollers : function(){
this.pos = this.tabPosition=='bottom' ? this.footer : this.header;
var h = this.stripWrap.dom.offsetHeight;

// left
var sl = this.pos.insertFirst({
cls:'x-tab-scroller-left',
style: this.tabPosition=='bottom' ? 'margin-top:1px;' : ''
});
sl.setHeight(h);
sl.addClassOnOver('x-tab-scroller-left-over');
this.leftRepeater = new Ext.util.ClickRepeater(sl, {
interval : this.scrollRepeatInterval,
handler: this.onScrollLeft,
scope: this
});
this.scrollLeft = sl;

// right
var sr = this.pos.insertFirst({
cls:'x-tab-scroller-right',
style: this.tabPosition=='bottom' ? 'margin-top:1px;' : ''
});
sr.setHeight(h);
sr.addClassOnOver('x-tab-scroller-right-over');
this.rightRepeater = new Ext.util.ClickRepeater(sr, {
interval : this.scrollRepeatInterval,
handler: this.onScrollRight,
scope: this
});
this.scrollRight = sr;
}
});