[CLOSED] TabPanel+TabScrollerMenu+enableTabScroll+Crhome = Black magic

[pil0t]

Hello!

Ohh... I have strange problem. I don't shure that it's problem to you, but i will try.

In TabPanel, if enableTabScroll is true and use plugin TabScrollMenu - happens strange problem . The right arrow are transparent, don't working, and covering the cross at tab's strip, that disable closing the last tab.

Here JS code, that reproducing this problem. Simple activate the last tab by mouse click:

var panel = new Ext.TabPanel({ 
        buttons         : [],
        enableTabScroll : true, 
    items: [
        {title:"The tab", html:"The tab number 1.", closable: true}, 
        {title:"Tab", html:"The tab number 2.", closable: true}, 
        {title:"Tab", html:"The tab number 3.", closable: true}, 
        {title:"Tab", html:"The tab number 4.", closable: true},
        {title:"Tab", html:"The tab number 5.", closable: true},
        {title:"One more tab", html:"The tab number 6.", closable: true}
    ],plugins: [this.ctl06 = new Ext.ux.TabScrollerMenu({
                menuPrefixText: "Open tabs"
            })]
    }); 
var wnd = new Ext.Window({ 
        layout  : 'fit', 
        width   : 386, 
        height  : 350, 
        items   : [panel], 
        modal   : true, 
        title   : 'Finestra', 
        maximizable : true, 
        minimizable : true 
    }); 
wnd.show();

After manipulations with arrows left and right in FF the problem will be resolved, but not in Chrome.

I investigated the problem and found that it is side effect of bugfix in ExtJS 2.2 - [FIXED][2.2] TabPanel enableTabScroll on Safari.

I tried resolve this problem using overrided method autoScrollTabs of TabPanel (see commented code):

Ext.override(Ext.TabPanel, 
    {
        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) { // 20 to prevent display:none issues
                return;
            }
            if (count == 0 || l <= tw) {
                // ensure the width is set if there's no tabs
                wd.scrollLeft = 0;
                wrap.setWidth(tw);
                if (this.scrolling) {
                    this.scrolling = false;
                    this.pos.removeClass('x-tab-scrolling');
                    this.scrollLeft.hide();
                    this.scrollRight.hide();
                    // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
                    //if (Ext.isAir || Ext.isWebKit) {
                    //    wd.style.marginLeft = '';
                    //    wd.style.marginRight = '';
                    //}
                }
            } else {
                if (!this.scrolling) {
                    this.pos.addClass('x-tab-scrolling');
                    // See here: http://extjs.com/forum/showthread.php?t=49308&highlight=isSafari
                    //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)) { // 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();
            }
        }
    }
)

I don't shure that my fix don't reproduce old bugs. Maybe it must be fixed in Ext.ux.TabScrollerMenu, maybe it's must add some listeners to TabPanel.

Could you do with it something? Maybe you could send bug to ExtJS... but problem occurred due I use user extension - Ext.ux.TabScrollerMenu.

I attached screenshot with example of this problem.

[Vladimir]

Hi,

Fixed. Works correctly in Chrome also