ExtJS 扩展窗口问题，显示在 FF 中而不是 IE 中

Question

我在 IE 中收到这条令人恼火的错误消息：“事件为空或不是对象”。

这是我的扩展窗口：

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);
}

});

这就是我在一个简单的 JS 函数中调用它的方式：

function showWindow(){
var win = new windowKandidaatInfo(id);
if(win){
    win.show();
}}

为什么它在 FF 中显示，但在 IE 中不显示？

Answer 1

这一行多了一个逗号。

{ xtype: 'textfield', width: 40, name: 'voorletters', fieldLabel: 'Voorl/ voornaam'},

Firefox 对 JS 语法非常宽容，而 IE 则不然。您的大多数问题也可能是由于多余的逗号造成的。为了解决这个问题，我在新行的开头而不是末尾添加逗号。

所以事情就会是这样的。

windowKandidaatInfo = Ext.extend(Ext.Window, {
id: 'windowKandidaatInfo'
,title: 'Kandidaatinfo'
,border: true
,bodyStyle: 'padding: 5px;'
,layout: 'fit'

Answer 2

尝试清理一下您的代码，缺少一些分号（http://www.jslint.com/）。

我前一段时间使用过 extjs，在 Firefox 中的窗口渲染中遇到了同样的问题，而在 IE 中却没有。也许IE的JS引擎对语法错误更敏感。