Question

我正在学习如何使用Ext.js框架，我使用Google API构建了一个地图，我正在使用GMapPanel小部件。

我在初始化应用程序时遇到一些问题需要识别小部件。我想在Controller上获取地图，但我一直收到这个错误：

未捕获的TypeError：无法读取null的属性'gmap' 在constructor.init（MapController.js？_dc = 20151109082919：46）在新构造函数（ext-all-rtl-debug.js？_dc = 20151109082919：63176）在构造函数[as self]（ext-all-rtl-debug.js？_dc = 20151109082919：12296）在Object.widget（ext-all-rtl-debug.js？_dc = 20151109082919：14662）在constructor.create（ext-all-rtl-debug.js？_dc = 20151109082919：26228）在constructor.lookupComponent（ext-all-rtl-debug.js？_dc = 20151109082919：123938）在constructor.prepareItems（ext-all-rtl-debug.js？_dc = 20151109082919：124418）在constructor.add（ext-all-rtl-debug.js？_dc = 20151109082919：123436）在constructor.initItems（ext-all-rtl-debug.js？_dc = 20151109082919：123861）在constructor.initComponent（ext-all-rtl-debug.js？_dc = 20151109082919：123821

我在控制器上使用以下代码：

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

我必须做类似于我现在尝试做的事情并且它有效，但是当有人点击特定按钮时会调用此函数。

startViewer: function (btn) {

...

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

...

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

}

现在我想在startViewer（）函数上执行相同的操作，但是当有人启动应用程序时，我该怎么做？

谢谢。

Answer 1

通常，您使用boxready（api）事件来执行此类操作。该事件只触发一次 - 当一个组件完成它的布局时。所以通常你会倾听，当它完成后你可以执行你想要的任何代码。因此，在您的窗口配置中，您可以执行以下操作：

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

然而，在这种情况下不会起作用，因为即使您的窗口可以使用它的布局，gmappanel可能仍然在创建实际的谷歌地图。因此，为了适应这种情况，您可以使用gmappanel提供的mapready事件。那么你就为你的窗口配置做了类似的事情：

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

无法读取null的属性'gmap'

1 个答案: