View Full Version : dynamic adding tabs issue

22 Jul 2012, 2:16 PM
I am new on extjs, I have a viewport with a grid and a tabpanel, I need to show in a new tab another grid related to the row that is clicked on the first grid, as far it is working: can click on one row of the first grid and show the second grid in a new tab, but when I click again in a row of the first grid, I have the new tab properly rendered, but the grid I generated before is disppeared, this is part of my code

var notesGrid=new Ext.grid.GridPanel ({

height: 155,
width: 440,
title: 'Notes',
store: storeCompaniesNotes,
columns: [
flex: 1.5,
dataIndex: 'note',
flex: 2,
text: 'Note'
//'codice mmas', 'ragione sociale', 'indirizzo', 'cap','comune','provincia','telefono','cf/piva'


var tabs2 = Ext.createWidget('tabpanel', {
renderTo: document.body,
activeTab: 0,
width: 600,
height: 250,
plain: true,
defaults :{
autoScroll: true,
bodyPadding: 10

});//eof tabs2

title: "Notes for "+record.data.name,
closable: true,
listeners: {activate: function(){}},

I think it is a very easy task, I do not know where I am wrong, can you show me my mistake? thanks in advance

22 Jul 2012, 10:41 PM
Hi arpho,

Try to call tabs2.doLayout() method after tabs2.add() or you can call doLayout() on tabchange event of tabPanel.
For more information see

2)http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-event-tabchange (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.tab.Panel-method-doLayout)

23 Jul 2012, 12:25 AM
thanks sword-it, I solved it, my mistake was very stupid, every time I was adding a new tab I used always the same objects: grid, store, but with different data, so I think the old copy were not valid, now I create a new object every time, it works, but I am not satisfied, I am sure there is a better way, because I moved the definitions of my objects inside the function I call on click, I think I have to study better ext.define, for that