PDA

View Full Version : [OPEN-1342] TabPanel Scroll breaks with "many" tabs >= 43 tabs



Seana
18 Oct 2010, 8:53 AM
Ext version tested:

Ext 3.2 rev 1
Ext 3.3 rev 0


Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

IE8
FF3.6.10 (firebug 1.5.4 installed)
Chrome 6.0.472.63


Operating System:

Win 7 Pro


Description:

Once the tab container's maximum width is hit and a second row of tabs is created the enableTabScroll flag is ignored until the second row of tabs width is greater than the current container.
Once the second row's width does trigger the recreation of the tab scroll code, it will only allow scrolling to happen across the width of the second row of tabs.
This happens every time a new row of tabs is added to the container.


Test Case:

In the tab example "tabs-adv" change the red marked contents of the JS file to match the following (note this bug is based on your client width so the number in red may need to be adjusted so that the tabs are calculated to be wider than your horizontal resolution)

Note: I've only encountered this once on a netbook, the bug in practice on a desktop is fairly hard to encounter.



/*!
* Ext JS Library 3.3.0
* Copyright(c) 2006-2010 Ext JS, Inc.
* licensing@extjs.com
* http://www.extjs.com/license
*/
Ext.onReady(function(){

var tabs = new Ext.TabPanel({
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu()
});

// tab generation code
var index = 0;
while(index < 44){
addTab();
}
function addTab(){
tabs.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
html: 'Tab Body ' + (index) + '<br/><br/>'
+ Ext.example.bogusMarkup,
closable:true
}).show();
}

new Ext.Button({
text: 'Add Tab',
handler: addTab,
iconCls:'new-tab'
}).render(document.body, 'tabs');
});



Screenshot or Video:

22895


Debugging already done:

stepped though add tab code with Firebug and ext-all-debug.js included (instead of ext-all.js)


the issue stems from line 864 in TabPanel.js(as of the 3.3.0 release) which is

l = this.edge.getOffsetsTo(this.stripWrap)[0] + pos;
once the second row of tabs is created the "l" variable "wraps around" and once again is less than tw causing the if block starting at 869 to fire and disable scrolling.

meroy
18 Oct 2010, 10:00 AM
Thanks for the report.

Condor
18 Oct 2010, 10:42 PM
I reported this a VERY long time ago, but the report was closed, because Jack said TabPanel simply wan't meant for that many tabs.

ps. You can increase the number of tabs, before it wraps by changing the stylesheet:

ul.x-tab-strip {
width: 20000px;
}

Seana
19 Oct 2010, 6:31 AM
Yeah, I noticed this last night when I busted out my old 15" CRT and ran the test on 1024x768 (my poor desktop cried), it was still 43+ tabs. Realizing that it was not the device resolution I did a little more digging and found the quoted css rule.

In reply to Jack's saying that it wasn't meant for that many tabs; One could argue what if someone made a custom theme that would only allow, say 1000px of tab bar width because their theme was designed for the look of multiple rows of tabs. While I agree that hitting the 43+ tabs in a tab Panel is highly unlikely and even more so probably inefficient (both in performance and design) I can still see reason for making a "shorter" tab bar that would facilitate say 15 tabs across 2 rows, and still support scrolling.

I guess my point here isn't that 43+ tabs are more than you should need/use, but that you can configure the length of the tab bar's container and that could produce a use case where this "bug" is propagated in a completely reasonable manner, thus making this a true bug and not an extreme case that should be ignored. ;)