PDA

View Full Version : [FIXED-1023] Tab close icon can shift out of view



gtaylor
3 Jun 2010, 11:18 AM
Ext version tested:

Ext 3.2.0


Adapter used:

ext


css used:

only default ext-all.css




Browser versions tested against:

IE8
FF3.6 (firebug 1.5.4 installed)


Operating System:

Win7


Description:

If I have scrollable tabs with the close menu on the tabs, and the
width of the tabpanel is wide enough such that the tabscroll arrows
do not appear, then the close [X] icon can shift out of view for the
last tab if the name of the tab is very long and that tab becomes active.


Test Case:



<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>Tab-Shift Problem Example</title>

<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<!-- overrides to base library -->


<!-- ** Javascript ** -->
<!-- base library -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>


<!-- overrides to base library -->

<!-- extensions -->

<!-- page specific -->

<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';

Ext.onReady(function(){

//your onReady code here
Ext.QuickTips.init();
new Ext.Window({
id : 'myWindow',
height : 200,
width : 550,
layout : 'fit',
title : 'Test Tab-Shift Problem',
items : {
xtype : 'tabpanel',
activeTab : 0,
id : 'myTPanel',
enableTabScroll : true,
resizeTabs : false,
minTabWidth : 75,
border : false,
items : [
{
title : 'our first tab has a long name'
}
]
}
}).show();

// Add a bunch of tabs dynamically
var tabLimit = 3;
(function (num) {
for (var i = 1; i <= tabLimit; i++) {
var title = 'Tab # ' + i;
Ext.getCmp('myTPanel').add({
title : title,
html : 'Hi, i am tab ' + i,
tabTip : title,
closable : true
});
}
Ext.getCmp('myTPanel').add({
title : 'Very Long Tab Name To Show Problem',
html : 'Hi, i am long tab name ',
tabTip : title,
closable : true
});
Ext.getCmp('myTPanel').setActiveTab(1);
}).defer(1000);

}); //end onReady

function setWindowWidth() {
Ext.getCmp('myWindow').setWidth(605);
}

function setTab() {
Ext.getCmp('myTPanel').setActiveTab(4);
}
</script>

</head>
<body>
<p>
An example to show the Tab-Shift problem where the Close [x] icon shifts out of view.
<hr>
To see the problem, follow these steps:
<br><br>
<ul>
<li>First, set the proper window size by clicking <a href='javascript: setWindowWidth()'>here</a>.</li>
<li>Next, set the proper active tab by clicking <a href='javascript: setTab()'>here</a>.</li>
</ul>
</body>
</html>



See this URL : http://


Steps to reproduce the problem:

Run the above code. Click the 'here' links in the first and second steps.


The result that was expected:

Tab scroll arrows would appear and the last tab shifted left to show the whole tab. Note: this does happen in the example window, if you resize it by even 1 pixel in any direction.


The result that occurs instead:

Tab title and close icon shift out of view.


Screenshot or Video:

attached


Debugging already done:

none


Possible fix:

not provided

evant
3 Jun 2010, 3:34 PM
Please follow the guidelines listed here: http://www.extjs.com/forum/showthread.php?71015-Posting-to-the-Bug-Forum

Thanks.

evant
8 Jun 2010, 12:29 AM
This has been resolved in SVN, thanks for the report.