View Full Version : Ext 4.2 Tab Panel with tabPosition: left - problems when tabs hidden

9 May 2013, 8:03 AM

I've been looking at the new vertical tabs in Ext

When I set tabs to be initially hidden (hidden: true in tab 3) then things go wrong. The tabs don't display, except for the last one.

Try this sample code from the examples page. All I have changed is to add hidden: true to Tab 3.

Ext.create('Ext.tab.Panel', {
renderTo: 'left-tabs',
tabPosition: 'left',
height: 360,
width: 300,
defaults: {
bodyPadding: 10
items: [
{ title: 'Tab 1', html: Ext.example.bogusMarkup, iconCls: 'tab-icon' },
{ title: 'Tab 2', html: Ext.example.bogusMarkup, closable: true },
{ title: 'Tab 3', html: Ext.example.bogusMarkup, hidden: true },
{ title: 'Disabled', html: Ext.example.bogusMarkup, iconCls: 'tab-icon', closable: true, disabled: true }

Chrome console error:
Uncaught TypeError: Cannot read property 'height' of null

Hence, should hidden:true work straight away, or or are there some other configs that need to be applied to get this to work. My guess is that when the tab is hidden the height of the tab can't be calculated correctly and something fails. Although why this should be so when deferredRender is true (which should be the default config) I'm not sure.

Anyone got any ideas?



9 May 2013, 4:46 PM
It's a known issue, will be fixed in the next release, see: http://www.sencha.com/forum/showthread.php?262471

10 May 2013, 4:15 AM
Ok, that's good.

Here's my version of the override from that bug report with a few lint errors tidied up.

Ext.define('MyApp.override.tab.Bar', {
override: 'Ext.tab.Bar',

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

// 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) {
i = i - 1;
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 = null,
pos = 0,

// hidden tabs don't have a lastBox
for (l = items.length; (i < l && !lastBox); i = i + 1) {
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;


10 May 2013, 9:11 AM
Actually, having tested it the override won't work that way because it then messes up horizontal tabs.

Presumaly the override should just be used on a tab panel instance that has vertical tabs.