ExtJS problem with Extended Window, shows in FF not in IE - firefox

Question

I get this irritating error message in IE, 'Events is empty or not an object'.
This is my Extended window:
windowKandidaatInfo = Ext.extend(Ext.Window, {
id: 'windowKandidaatInfo',
title: 'Kandidaatinfo',
border: true,
bodyStyle: 'padding: 5px;',
layout: 'fit',
width: 800,
height: 600,
pers_id: 0,
modal: true,
viewConfig: {forceFit: true},
constructor: function(pers_id){
this.pers_id = pers_id;
windowKandidaatInfo.superclass.constructor.call(this);
},
activeTab: function(panel, tab){
tab.getForm().load({
url: '/kandidaten/get_kandidaat_info/' + panel.pers_id + '/',
method: 'get'
});
tab.getForm().on({
actioncomplete: function(form, event){
if(event.type == "load"){
//Data loaded
}
}
})
},
spacerCol: {
colspan: 2,
border: true,
width: 1,
height: 25,
align: 'left'
},
combCountry: {
xtype: 'combo',
name:'land',
fieldLabel: 'Land',
store: new Ext.data.JsonStore({
url: '/index/get_countries/',
method: 'get',
root: 'data',
fields: [{name:'id'},{name:'naam'}],
autoLoad: true
}),
displayField: 'naam',
valueField: 'id',
triggerAction: 'all',
selectOnFocus: true,
typeAhead: true
},
combGeslacht: {
xtype: 'combo',
name:'geslacht',
fieldLabel: 'Geslacht',
store: new Ext.data.JsonStore({
url: '/index/get_geslacht/',
method: 'get',
root: 'data',
fields: [{name:'naam'}],
autoLoad: true
}),
displayField: 'naam',
triggerAction: 'all',
selectOnFocus: true,
typeAhead: true
},
combBurgelijkeStaat: {
xtype: 'combo',
name:'burgelijke_staat',
fieldLabel: 'Burgelijke staat',
store: new Ext.data.JsonStore({
url: '/index/get_burgelijke_staat/',
method: 'get',
root: 'data',
fields: [{name:'naam'}],
autoLoad: true
}),
displayField: 'naam',
triggerAction: 'all',
selectOnFocus: true,
typeAhead: true
},
combProfessions: {
xtype: 'combo',
name:'beroep',
fieldLabel: 'Beroep',
store: new Ext.data.JsonStore({
url: '/index/get_beroepen/',
method: 'get',
root: 'data',
fields: [{name:'beroep'}],
autoLoad: true
}),
displayField: 'beroep',
triggerAction: 'all',
selectOnFocus: true,
typeAhead: true
},
initComponent: function(){
Ext.apply(this, {
items: new Ext.TabPanel({
id: 'tabGeneral',
pers_id: this.pers_id,
activeTab: 0,
items: [
{
title: 'Algemene info',
layout: 'table',
xtype: 'form',
frame: true,
bodyStyle: 'padding: 5px;',
viewConfig: {columns: 2, forceFit: true},
items: [
{
column: .5,
width: 400,
layout: 'form',
items: [
{
layout: 'table',
columns: 2,
items: [
{
layout: 'form',
style: 'margin-right: 5px;',
items: [
{ xtype: 'textfield', width: 40, name: 'voorletters', fieldLabel: 'Voorl/ voornaam'},
]
},
{
layout: 'form',
items: [
{ xtype: 'textfield', width: 200, name: 'voornaam', hideLabel: true}
]
}
]
},
{ xtype: 'textfield', name: 'achternaam', fieldLabel: 'Achternaam'},
{ xtype: 'textfield', name: 'adres', fieldLabel: 'Adres'},
{
layout: 'table',
columns: 2,
items: [
{
layout: 'form',
style: 'margin-right: 5px;',
items:[
{xtype:'textfield', width: 60, name:'postcode', fieldLabel:'Postcode/ plaats'}
]
},
{
layout: 'form',
items: [
{xtype:'textfield', width: 200, name:'plaats', hideLabel: true}
]
}
]
},
this.combCountry,
this.spacerCol,
{ xtype: 'textfield', value: '1900-01-01', format: 'Y-m-d', name: 'geb_datum', fieldLabel: 'Geb. datum'},
{ xtype: 'textfield', name: 'bsn_nummer', fieldLabel: 'Bsn nummer'},
this.combProfessions,
this.spacerCol,
{ xtype: 'textfield', name: 'bedrijfsnaam', fieldLabel: 'Bedrijfsnaam'},
{ xtype: 'textfield', name: 'kvk_naam', fieldLabel: 'KvK naam'},
{ xtype: 'textfield', name: 'kvk_land', fieldLabel: 'KvK land'}
]
},
{
column: .5,
width: 400,
layout: 'form',
items: [
{ xtype: 'textfield', name: 'telefoon', fieldLabel: 'Telefoon'},
{ xtype: 'textfield', name: 'mobiel', fieldLabel: 'Mobiel'},
{ xtype: 'textfield', name: 'fax', fieldLabel: 'Fax'},
{ xtype: 'textfield', width: 200, name: 'email', fieldLabel: 'E-mail'},
{ xtype: 'textfield', width: 200, name: 'website', fieldLabel: 'Website'},
this.spacerCol,
{ xtype: 'textfield', name: 'geb_plaats', fieldLabel: 'Geb. plaats'},
this.combBurgelijkeStaat,
this.combGeslacht,
this.spacerCol,
{ xtype: 'textfield', name: 'btw_nummer', fieldLabel: 'BTW nummer'},
{ xtype: 'textfield', name: 'kvk_plaats', fieldLabel: 'KvK plaats'},
{ xtype: 'textfield', name: 'kvk_nummer', fieldLabel: 'KvK nummer'}
]
}
]
},
{
title: 'Adres info',
xtype: 'form',
layout: 'form',
bodyStyle: 'padding: 5px;'
},
{
title: 'Contact info',
xtype: 'form',
layout: 'form',
bodyStyle: 'padding: 5px;'
}
],
listeners: {
tabchange: this.activeTab
}
})
});
windowKandidaatInfo.superclass.initComponent.call(this);
},
show: function(){
windowKandidaatInfo.superclass.show.apply(this, arguments);
}
});
this is how i call it in a simple JS function:
function showWindow(){
var win = new windowKandidaatInfo(id);
if(win){
win.show();
}}
Why o why is it showing in FF but not in IE?

Answer 1

You have an extra comma on this line.
{ xtype: 'textfield', width: 40, name: 'voorletters', fieldLabel: 'Voorl/ voornaam'},
Firefox is very forgiving with JS syntax where IE isn't. Most of your issues will also probably be due to extra commas. To combat this, I do commas at the beginning of new lines instead of at the end.
So it would be like this.
windowKandidaatInfo = Ext.extend(Ext.Window, {
id: 'windowKandidaatInfo'
,title: 'Kandidaatinfo'
,border: true
,bodyStyle: 'padding: 5px;'
,layout: 'fit'

Answer 2

Try cleaning up your code a bit, there are a few missing semicolons (http://www.jslint.com/).
I worked with extjs some time ago, and had the same problem with a window rendering in Firefox and not in IE. Maybe IE's JS engine is more sensitive to syntactical errors.