PDA

View Full Version : dynamically adding closable tabs to tab panel



javapurna
25 Apr 2013, 1:54 AM
hi every one ,

i am try to add closable panel to tabpanels dynamically on click of tool bar item(add) . if i am click on add 3 times ,open 3 closable panel .

it is done sucessfully ,but probleam is i am closing first opened panel all tab panels collapsed and get error

Uncaught TypeError: Cannot read property 'parentNode' of undefined

my code is below:

tabpanels code:
var lowerTabPanel = Ext.create('Ext.tab.Panel', { id: 'a-header-tab-panel',
plain: true,
plugins: [{
ptype: 'tabscrollermenu',
maxText: 15,
pageSize: 5
}],
items: [{

title: 'A',


}, {
title: 'B',


}, {
title: 'C',

}]
});

my tool bar docked items code:

var dockedItems = [{
xtype: 'toolbar',
cls: 'footer',
dock: 'top',
items: [{
text:'Add',
id:'addcontact',
handler:function() {
var tabs=Ext.getCmp('a-header-tab-panel'); // id is tabpanel id

var addContact=tabs.add({title:'Add Contact'
,xtype: 'addContact',});
tabs.setActiveTab(addContact);



}

}]
}];
xtype: 'addContact', code is below


Ext.define("ADD", {
extend: "Ext.container.Container",

xtype: 'addContact',
bodyPadding: 5,
closable: true,
//itemId:'addcontact',
title: 'Add ',

initComponent: function() {
HERE TWO FORMS
}
});

PLEASE

Arg0n
25 Apr 2013, 6:29 AM
In your handler function:


function() {
var tab = Ext.widget('addContact', {title: 'Add Contact'}),
tabpanel = Ext.getCmp('a-header-tabpanel');

tabpanel.add(tab);
tabpanel.setActiveTab(tab);
}

javapurna
25 Apr 2013, 8:15 PM
thank you very much for replaying argon,

but till i am getting same error[Uncaught TypeError: Cannot read property 'parentNode' of undefined ] , the code working fine to open new tabpanels ,but if i am closing the tabpanel collapse all tabpanels and getting error above , please replay me

Arg0n
25 Apr 2013, 11:45 PM
Could you show the function where the error happens?

javapurna
26 Apr 2013, 1:33 AM
ERROR happened it the time of closing tabpanel(i .e if i am open three tabpanels , i am closing First opened tabpanel the error will come).
Uncaught TypeError: Cannot read property 'parentNode' of undefined . my button handler code is below.
var dockedItems = [{ xtype: 'toolbar',
cls: 'footer',
dock: 'top',
items: [{

text:'ADD',
id:'addcontact',
handler:function() {
var tab = Ext.widget('addContact', {title: 'Add Contact'}),
tabpanel = Ext.getCmp('a-header-tab-panel');

tabpanel.add(tab);
tabpanel.setActiveTab(tab);
}]
}]
and my tabpanels code:


Ext.define(".AddContact", {
extend: "Ext.container.Container",

//xtype: 'addContact',
alias: 'widget.addContact',
bodyPadding: 5,
closable: true,
//itemId:'addcontact',
title: 'Add Contact',

initComponent: function() {
here my forms ;
}
});
if i am click on ADD TWO TIME ,OPENED TOW TABPANELS, BUT IF I AM CLOSING FIRST OPENED TABPANEL ALL TABPANELS COLLAPSED AND ERROR WILL GET.

slemmon
26 Apr 2013, 3:00 PM
Do you get an error with the following code:
If not you might post a complete test case (don't forget to wrap your code in code tags - the # button in the toolbar above) so that I or the community members can better see what you're doing that causes the issue?



Ext.widget('tabpanel', {
renderTo: Ext.getBody(),
height: 300,
width: 500,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Add',
handler: function (btn) {
var tp = btn.up('tabpanel');
var added = tp.add({
title: 'Added'
, closable: true
});
tp.setActiveTab(added);
}
}]
}]
});