nullのプロパティ 'gmap'を読み取れません

Question

私はExt.jsフレームワークを使用する方法を学び、Google APIを使用して地図を作成しました。私はGMapPanelウィジェットを使用しています。

アプリケーションの初期化時にウィジェットを識別するためのいくつかの問題があります。私は何を私に似た何かをしなければならなかった

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

：私は、コントローラ上のマップを取得したいと思いますが、私はこのエラーを受信し続ける：

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

私は、コントローラ上で次のコードを使用しています今やろうとしていて、うまくいきましたが、特定のボタンをクリックするとこの関数が呼び出されます。誰かがアプリケーションを起動したときに

startViewer: function (btn) { 

... 

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

... 

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

} 

今、私は私はそれをどのように行うことができ、私はstartViewer（）関数ではなく、自動的にやった同じことをしたいと思いますか？

ありがとうございます。

Answer 1

通常、このようなことを行うにはboxready（api）イベントを使用します。このイベントは、コンポーネントがレイアウトを完了したときに1回だけ発生します。だからあなたはそれを聞いて、それが終わったらいつでも好きなコードを実行することができます。しかし、それはレイアウトだと、あなたの窓が行われる可能性があるにもかかわらずあるため動作しません、この場合には、gmappanelはまだ実際に作成される可能性があります

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

：だからあなたのウィンドウの設定では、次のような何かをしたいですグーグルマップ。したがって、これに対処するには、gmappanelが提供するイベントmapreadyを使用することができます。だからあなたはあなたのウィンドウの設定のためにこれをするでしょう：

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