View Full Version : TabPanel - add tabs dynamically

4 Aug 2012, 4:55 AM
Does anybody had same problem with tabs?

1) Add your closable tab dynamically by add function
2) Close this tab
3) Add tab same tab again

You will get following error

TypeError: c.getPositionEl().dom is undefined
return target && c.getPositionEl().dom.parentNode == (target.dom || target);

line 13779

TabPanel config

region: 'center',
tabPosition: 'bottom',
//autoDestroy: false, - everything go well with this configuration
activeTab: 0,
items: [

autoDestroy on false will keep your tabs hidden. But in big apps you could have problem with speed when you will have too many dom elements (or not?).

So what you can do with tabs when you have autoDestroy on true? doLayout or layoutOnTabChange doesnt help.

4 Aug 2012, 5:30 AM
There should be no issue in creating the same tab over and over.

Could you share your tab creation code?

4 Aug 2012, 10:21 AM
var tabPanel = this.ownerCt.centerPanel;

if (!this.historyTab) {
this.historyTab = new Ext.Panel({
layout: 'fit'


Example: http://jsfiddle.net/7qDRh/

6 Aug 2012, 12:39 AM
The code in your fiddle works fine for me?

6 Aug 2012, 1:08 AM
Hmm interesting. I tested it again:

Chrome 20.0.1132.57 on Win 7:

Uncaught TypeError: Cannot read property 'parentNode' of undefined

Firefox 14.0.1

TypeError: c.getPositionEl().dom is undefined
fn.call(scope || el, e, t, o);

6 Aug 2012, 1:56 AM
Try something like the following:

6 Aug 2012, 3:14 AM
Ok your example works well, but where is the problem?
I changed condition in my code and everything works well, but in example i shared over jsfiddle there is tab defined in variable without checking if tab is already added to tabPanel.
Do I need set up ID of tab everytime? I think there is problem with content of that tab because you will get tab without html. When you check source code of page in Firebug, x-tab-panel-body contains only first tab after you add, remove and add closable tab. X-tab-panel-footer contains both tabs.

var tabPanel = this.ownerCt.centerPanel;var tab = tabPanel.getItem('panel-'+id);

if (!Ext.isDefined(tab)) {
tab = new Ext.Panel({
layout: 'fit'