PDA

View Full Version : Tabpanel - Tabscroll Image not visible



basavarajkoti
27 Apr 2009, 11:59 PM
Hi,
I am using viewport to render a tabpanel with "enableTabScroll:true", but the arrow images on the LHS and RHS are not visible correctly, in IE6 and FF3.

PFA the image for reference.

What could be the possible error / mistake ??

jay@moduscreate.com
28 Apr 2009, 3:55 AM
did you set Ext.BLANK_IMAGE_URL?

do you have any other CSS on the page that might be interfering?

basavarajkoti
28 Apr 2009, 9:25 PM
Yes Ext.BLANK_IMAGE_URL is Set.

I do not have any other interfering CSS.

mschwartz
29 Apr 2009, 6:16 AM
This is certainly a bug in 3.0-rc1.

I think it's been reported already.

Try this:


Ext.override(Ext.TabPanel, {
autoScrollTabs: function() {
var count = this.items.length;
var ow = this.header.dom.offsetWidth;
var tw = this.header.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) {
return;
}
if (l <= tw) {
wd.scrollLeft = 0;
wrap.setWidth(tw);
if (this.scrolling) {
this.scrolling = false;
this.header.removeClass('x-tab-scrolling');
this.scrollLeft.hide();
this.scrollRight.hide();
if (Ext.isAir || Ext.isSafari) {
wd.style.marginLeft = '';
wd.style.marginRight = '';
}
}
} else {
if (!this.scrolling) {
this.header.addClass('x-tab-scrolling');
if (Ext.isAir || Ext.isSafari) {
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();
}
}
});