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
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