2010-06-30 3 views
0

Я получаю это раздражающее сообщение об ошибке в IE: «События пустые или не объекты».Проблема ExtJS с расширенным окном, отображается в FF не в 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?

+0

IE интерпретирует [a, b, c,] как массив с 4 элементами, что его четвертый элемент не определен, а все остальные браузеры рассматривают это как массив с 3 элементами. Таким образом, обычно конечная запятая в массивах приводит к неожиданному поведению в IE. Однако в вашем коде, как указал @BrennaSoft, вы можете добавить дополнительную запятую в определение объекта, которое, насколько мне известно, также не принимается в FF. Сказав это, FF может иметь код для обработки таких исключительных случаев, в то время как IE, вероятно, этого не делает. – Behrang

ответ

2

У вас есть дополнительная запятая на этой линии.

{ 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' 
+0

+1 для указания дополнительной запятой, но -1 для рекомендации по увековечению кода в качестве долгосрочного решения. Итак, вы идете. –

+0

Да, когда это правильно! Большое спасибо! –

0

Попробуйте немного очистить свой код, есть несколько отсутствующих точек с запятой (http://www.jslint.com/).

Я работал с extjs некоторое время назад и имел ту же проблему с рендерингом окна в Firefox, а не в IE. Возможно, JS-движок IE более чувствителен к синтаксическим ошибкам.