ExtJS: Script-Error im Internet Explorer

Vor kurzem habe ich mich mit der Erstellung von Dialogen und GridPanels in der hochentwickelten JavaScript Bibliothek ExtJS beschäftigt. Eins vorweg: ExtJS ist sehr gut. Selten habe ich bei einer Bibliothek oder einem Framwork eine ähnlich umfangreiche und ansprechend gestaltete Dokumentation gesehen. Die Schnittstellen sind vorbildlich beschrieben und es gibt viele Beispiele. Außerdem gibt ExtJS dem Entwickler die Möglichkeit quasi-objekt-orientiert mit JavaScript zu arbeiten.

Doch nun zu einem Problem, das mir bei meiner Arbeit mit der GridPanel Komponente von ExtJS begegnet ist. Der Code sah ursprünglich etwa so aus:

Ext.onReady( function()
{
   myStore = new Ext.data.JsonStore({
                              //...
                });

   myGrid = new Ext.grid.GridPanel({
                              //...
                              store: myStore,
                              //...
                });

   myGrid.render("theGridId");
   myStore.load();
}

Obwohl die Instanzierung aller Komponenten für das GridPanel innerhalb der Ext.onReady() Funktion durchgeführt wurden kam es im Internet Explorer 6/7 zu einen Skript Error. Dieser besagte, dass das Ext.grid.GridPanel Objekt eine Eigenschaft oder Methode nicht untersützt. Da die Konfiguration einer ExtJS-Komponente in den meisten Fällen über JSON geschieht und die JavaScript-Debugger bei dieser Variante der Objektinitialisierung nur geringe Informationen bieten (nicht nur IE, auch FireFox/FireBug und Chrome) gestaltete sich die Fehlersuche recht schwierig. Unter FireFox 3.5/3.6 und in Googles Chrome 4 kam es übrigens zu keinen Problemen.

Die Lösung war schlußendlich, die Objekterzeugung außerhalb von Ext.onReady() durchzuführen, während das Rendering via myGrid.render() innerhalb stattfand.

myStore = new Ext.data.JsonStore({
                              //...
                });

myGrid = new Ext.grid.GridPanel({
                              //...
                              store: myStore,
                              //...
                });

Ext.onReady( function()
{
   myGrid.render("theGridId");
   myStore.load();
}

Ich habe keine wirkliche Erklärung für dieses Phänomen. Wenn jemand eine hat, ich freue mich über Kommentare.