ExtJS 4 grid columns error - extjs

Question

I've developed a website which saves some data of companies in four tabs.
The site starts in a tab which contains panels and textboxes.
When I switch to the "Kontakte"-tab the appearing grid is displayed correctly like this
When I switch the tab again (in this case to the "Veranstaltungen"-tab), the grid in the new tab is displayed incorrectly.
The size and the data of the columns is incorrect. As you can see the column "Nachname" is displayed twice, but the header of the first column should be "Vorname". Additionally, the width of the first column seems to be not correct, although the forcefit-property of the grid is set "true".
A very similar error occurs when i firstly switch to the "Veranstaltungen"-tab and then I switch to the "Kontakte"-tab. Now the grid of the "Veranstaltungen"-tab is correct, but the size and the data of the columns in the "Kontakte"-tab are incorrect. Again, the size and the header of the first column is incorrect (should be "Anrede").
To sum, the grid in the tab which is displayed firstly is correct, but the grid in the second displayed tab is incorrect. Does anyone know why this error occur?
A panel which is rendered to a div contains the headline and the tabwidget.
Sometimes it happens that other columns aren't diplayed correctly, so it seems like the configuration of the first column is not responsible for the problem. Furthermore, if the stores are empty, the second displayed tab and grid is displayed correctly.
So, finally, what do you think is the problem?
Thx for every advice, Patrick Kerschbaum
Code of the "Kontakte"-store and -grid:
var companyContactsData = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
type: 'ajax',
url: 'detailCompanies_contacts_getData.php?un_id=' + un_id + '',
reader: {
type: 'json',
idProperty: 'ko_vorname'
},
writer: new Ext.data.JsonWriter({
encode: false,
listful: false,
writeAllFields: false
})
}),
fields: ['ko_id', 'ko_anrede', 'ko_titel', 'ko_vorname', 'ko_nachname', 'ko_email1', 'ko_telg1', 'funktionen']
});
companyContactsData.load();
var companyContactsGrid = new Ext.grid.GridPanel({
store: companyContactsData,
title: 'Kontakte',
width: 1000,
padding: 10,
frame: true,
autoHeight: true,
forceFit: true,
columns: [{
id: 'ko_id',
header: 'ko_id',
dataIndex: 'ko_id',
hidden: true
}, {
id: 'ko_anrede',
header: 'Anrede',
dataIndex: 'ko_anrede',
sortable: true,
width: 50
}, {
id: 'ko_titel',
header: 'Titel',
dataIndex: 'ko_titel',
sortable: true,
width: 50
}, {
id: 'ko_nachname',
header: 'Nachname',
dataIndex: 'ko_nachname',
sortable: true
}, {
id: 'ko_vorname',
header: 'Vorname',
dataIndex: 'ko_vorname',
sortable: true
}, {
id: 'funktionen',
header: 'Funktionen',
dataIndex: 'funktionen',
sortable: true
}, {
id: 'ko_telg1',
header: 'Telg1',
dataIndex: 'ko_telg1',
sortable: true
}, {
id: 'ko_email1',
header: 'Email1',
dataIndex: 'ko_email1',
sortable: true
}, {
xtype: 'actioncolumn',
width: 50,
items: [<?php if($_SESSION['ko_detail']) { ?> {
icon: 'pics/information.png',
tooltip: 'Zur Kontakt-Detailansicht wechseln',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var kontaktid = rec.get('ko_id');
var url = "../../manageContacts/detailContacts/detailContacts.php?ko_id=" + kontaktid;
top.location.href = url;
}
}
<?php } ?>
]
}],
style: {
"vertical-align": "middle",
"text-align": "left"
}
});
Code of the "Veranstaltungen"-store and -grid:
var companyEventsData = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
type: 'ajax',
url: 'detailCompanies_events_getData.php?un_id=' + un_id + '',
reader: {
type: 'json',
idProperty: 'ko_anrede'
},
writer: new Ext.data.JsonWriter({
encode: false,
listful: false,
writeAllFields: false
})
}),
fields: ['v_id', 'v_eingabedatum', 'v_name', 'v_teilgenommen', 'v_eingeladen', 'ko_vorname', 'ko_nachname', 'kv_eingeladen', 'kv_teilgenommen', 'kv_bemerkung']
});
companyEventsData.load();
var companyEventsGrid = new Ext.grid.GridPanel({
store: companyEventsData,
title: 'Veranstaltungen',
width: 1000,
padding: 10,
frame: true,
autoHeight: true,
forceFit: true,
columns: [{
id: 'v_id',
dataIndex: 'v_id',
hidden: true
}, {
id: 'ko_vorname',
header: 'Vorname',
dataIndex: 'ko_vorname',
sortable: true
}, {
id: 'ko_nachname',
header: 'Nachname',
dataIndex: 'ko_nachname',
sortable: true
}, {
id: 'kv_eingeladen',
header: 'Eingeladen',
dataIndex: 'kv_eingeladen',
sortable: true
}, {
id: 'kv_teilgenommen',
header: 'Teilgenommen',
dataIndex: 'kv_teilgenommen',
sortable: true
}, {
id: 'kv_bemerkung',
header: 'Bemerkung',
dataIndex: 'kv_bemerkung',
sortable: true
}, {
id: 'v_eingabedatum',
header: 'Datum',
dataIndex: 'v_eingabedatum',
sortable: true
}, {
id: 'v_name',
header: 'Name',
dataIndex: 'v_name',
sortable: true
}, {
id: 'v_teilgenommen',
header: 'Teilnehmeranzahl',
dataIndex: 'v_teilgenommen',
sortable: true
}, {
id: 'v_eingeladen',
header: 'Eingeladene',
dataIndex: 'v_eingeladen',
sortable: true
}],
style: {
"vertical-align": "middle",
"text-align": "left"
}
});
Code of the tabwidget:
var tabs = Ext.createWidget('tabpanel', {
activeTab: 0,
width: 1000,
plain: true,
defaults: {
autoScroll: true,
},
items: [companyBasicDataPanel, companyContactsGrid, companyClassificationsGrid, companyEventsGrid]
});
Code of the main panel:
var detailCompanies_panel = new Ext.Panel({
renderTo: 'content',
autoHeight: true,
bodyBorder: false,
border: 0,
cls: 'my-component',
width: 1000,
items: [untz1_label, tabs],
style: {
"margin-left": "auto",
"margin-right": "auto"
}
});

Answer 1

I came across the same issue.
Turns out the id's where declared double, as they are in your code.
You should never assign ids manually, besides from id: Ext.id().