PDA

View Full Version : [FIXED] [4.2] 'right' side tabs throw exception if tabs are hidden initially.



jay@moduscreate.com
28 Apr 2013, 7:23 PM
In Chrome the following code...


Ext.create('Ext.tab.Panel', {
renderTo : Ext.getBody(),
height : 500,
width : 400,
activeTab : 2,
tabPosition : 'right', // <--- works perfectly if you comment this line out!
dockedItems : [
{
xtype : 'toolbar',
dock : 'top',
weight : -1,
items : [
{
text : 'File'
},
{
text : 'Edit'
},
{
text : 'Save'
}
]
}
],
items : [
{
title : '#1 tab',
html : 'My first tab',
closable : true,
dockedItems : [
{
xtype : 'toolbar',
items : [
{
text : 'Copy'
},
{
text : 'Paste'
}
]
}
]
},
{
title : '#2 hidden',
html : 'Peekabo',
itemId : 'secondTab',
hidden : true
},
{
title : '#3 closable',
html : 'I am closable',
itemId : 'thirdTab',
closable : true
},
{
title : '#4 Disabled tab',
itemId : 'disabledTab',
html : 'Peekaboo!',
disabled : true
}
],
buttons : {
weight : -2,
items : [
{
text : 'Show #2 item',
handler : function(btn) {

var tabPanel = btn.up('tabpanel'),
hiddenTab = tabPanel.child('#secondTab'),
tabIndex = tabPanel.items.indexOf(hiddenTab);

hiddenTab.tab.show();

tabPanel.setActiveTab(tabIndex)
}
},
{
text : 'Hide #3 item',
handler : function(btn) {

var tabPanel = btn.up('tabpanel'),
visibleTab = tabPanel.child('#thirdTab'),
tabIndex = tabPanel.items.indexOf(visibleTab);

visibleTab.tab.hide();

tabPanel.setActiveTab(0);
}
}
]
}
});

http://djliquidice.com/i/2013-04-28_23-21-39.png

http://djliquidice.com/i/2013-04-28_23-22-40.png

jay@moduscreate.com
28 Apr 2013, 7:23 PM
Sorry for the HUGE files. I'm using a retina mac :(

teaganrichat
30 Apr 2013, 10:47 AM
Patch to Ext.tab.Bar


adjustTabPositions: function() {
var items = this.items.items,
i = items.length,
pos,
tab;

// When tabs are rotated vertically we don't have a reliable way to position
// them using CSS in modern browsers. This is because of the way transform-orign
// works - it requires the width to be known, and the width is not known in css.
// Consequently we have to make an adjustment to the tab's position in these browsers.
// This is similar to what we do in Ext.panel.Header#adjustTitlePosition
if (!Ext.isIE9m) {
while (i--) {
tab = items[i];
pos = this.getAdjustedTabPosition(i, items);
tab.el.setStyle('left', pos + 'px');
}
}
},

// @private
// get the position of the last displayed tab
getAdjustedTabPosition: function(i, items) {
var lastBox, pos = 0;

// hidden tabs dont have a lastBox
for (; i < items.length && !lastBox; i++) {
lastBox = items[i].lastBox;
}


if (this.dock === 'right') {
// rotated 90 degrees around using the top left corner as the axis.
// tabs need to be shifted to the right by their width
pos = lastBox ? lastBox.width : 0;


} else if (this.dock === 'left') {
// rotated 270 degrees around using the top left corner as the axis.
// tabs need to be shifted down by their height
pos = lastBox ? -lastBox.height : 0;
}


return pos;
}