PDA

View Full Version : TabPanel - dynamically adding tabs leads to bbar being hidden



thstory
27 Mar 2013, 5:40 AM
When dynamically adding panels to a TabPanel, when there are 2 rows reached (around 40 or so tabs in the example), the bbar becomes about 90% hidden from view. I've recreated in the following example.


Ext.onReady(function() {
//---
var simpleTab = {
title: 'My first tab',
id: 'simpleTab',
html: 'This is my first tab!',
closable: true
};

var closableTab = {
title: 'I am closable',
html: 'Please close when done reading.',
closable: true
};

var disabledTab = {
title: 'Disabled tab',
id: 'disabledTab',
html: 'Peekaboo!',
disabled: true,
closable: true
};

var tabPanel = new Ext.TabPanel({
activeTab: 0,
id: 'myTPanel',
enableTabScroll: true
,items: [
simpleTab, closableTab, disabledTab
]
,bbar: {
id: 'id-gct-tabpanel-bbar'
,xtype: 'panel'
,buttons: [
{text: 'Text'
,iconCls: 'icon-boxify-one'
,cls: 'x-btn-text-icon'
,tooltip: 'tooltip'
}
]
}
});

// to simulate the dynamic nature of adding tabs
(function (num) {
for (var i = 1; i<=55; i++) {
var title = 'Long Title Tab # ' + i;
tabPanel.add( {
title: title
,html: 'Hi, I am tab ' + i
,tabTip: title
,closable: true
});
}
}).defer(500);

var win = new Ext.Window({
height: 300,
width: 600,
layout: 'fit',
items: tabPanel
});
win.show();
});

Any ideas?

willigogs
29 Mar 2013, 2:43 AM
I've come across this before, and it's due to the container which the tabs are dropped into having a maximum width. This can be overwritten to make the container wider (I'll have a look later for the exact config), but the final solution I went for was to limit the number of tabs which can be added, and prompt the user to close some tabs once the limit has been reached.