Eigenschaft 'gmap' von null kann nicht gelesen werden

Question

Ich lerne, wie man das Ext.js-Framework verwendet, und ich habe eine Karte mit Google API erstellt, ich verwende das GMapPanel-Widget.

Ich habe einige Probleme, das Widget zu identifizieren, wenn die Anwendung initialisiert wird. Ich möchte die Karte auf Controller bekommen, aber ich halte diese Fehler zu empfangen:

Uncaught TypeError: Cannot read property 'gmap' of null at constructor.init (MapController.js?_dc=20151109082919:46) at new constructor (ext-all-rtl-debug.js?_dc=20151109082919:63176) at constructor [as self] (ext-all-rtl-debug.js?_dc=20151109082919:12296) at Object.widget (ext-all-rtl-debug.js?_dc=20151109082919:14662) at constructor.create (ext-all-rtl-debug.js?_dc=20151109082919:26228) at constructor.lookupComponent (ext-all-rtl-debug.js?_dc=20151109082919:123938) at constructor.prepareItems (ext-all-rtl-debug.js?_dc=20151109082919:124418) at constructor.add (ext-all-rtl-debug.js?_dc=20151109082919:123436) at constructor.initItems (ext-all-rtl-debug.js?_dc=20151109082919:123861) at constructor.initComponent (ext-all-rtl-debug.js?_dc=20151109082919:123821

ich den folgenden Code auf Controller:

init: function() { 

var me = this; 
var w = me.getView(); 

var flightPathCoordinates = [ 
     {lat: (...), lng: (...)}, 
     {lat: (...), lng: (...)}, 
     {lat: (...), lng: (...)}, 
     {lat: (...), lng: (...)} 
]; 


var flightPath = new google.maps.Polyline({ 
     path: flightPathCoordinates, 
     strokeColor: '#42ffcf', 
     strokeOpacity: 0.6, 
     strokeWeight: 5 
}); 

flightPath.setMap(w.down('gmappanel').gmap); 

Ich hatte etwas Ähnliches zu tun, was ich Ich versuche es jetzt zu tun und es hat funktioniert, aber diese Funktion wird aufgerufen, wenn jemand auf eine bestimmte Schaltfläche klickt.

startViewer: function (btn) { 

... 

var map = btn.up('map'); 

... 

flightPath.setMap(btn.up('map').gmap); 

} 

Nun würde Ich mag das Gleiche tun, die ich auf startViewer tat() Funktion, sondern automatisch, wenn jemand die Anwendung gestartet wird, wie kann ich das tun?

Vielen Dank.

Answer 1

Normalerweise verwenden Sie das Ereignis boxready (api), um so etwas zu tun. Dieses Ereignis wird nur einmal ausgelöst - wenn eine Komponente das Layout fertiggestellt hat. Normalerweise hörst du darauf und wenn du fertig bist, kannst du den Code ausführen, den du willst. Also in Ihrem Fenster Config, dann würden Sie so etwas wie:

listeners: { 
    boxready: function(w){ 
     var map = w.down('gmappanel').gmap; 
     //etc 
    } 
} 

jedoch in diesem Fall nicht, weil auch funktionieren wenn Ihr Fenster getan werden könnte, damit das Layout ist, könnte die gmappanel noch zu schaffen sein, die eigentlichen google Karte. Um dies zu berücksichtigen, können Sie stattdessen das Ereignis mapready verwenden, das gmappanel bereitstellt. Also würden Sie so etwas für Ihre Fensterkonfiguration tun:

items: [{ 
    xtype: 'gmappanel', 
    listeners: { 
     mapready: function(gmappanel){ 
      var map = gmappanel.gmap; 
     } 
    } 
}]