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

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

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.

Answer 2

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'