Sencha Touch - 为什么在我的自定义组件中未定义此功能？

Question

我试图导航Sencha类系统，似乎在这方面失败。

我有一个Carousel，我也添加了组件。我有一个带有记录的商店，并且我正在循环查看记录，并在每次迭代中将自定义组件添加到传送带。下面是代码...

var carousel = Ext.create("Ext.Carousel", { 
     fullscreen: true 
    }); 

    sights.each(function(sight, index, length){ 
     carousel.add(Ext.create("Parks.view.ImageView", { 
      imageName: sight.get("img"), 
      titleName: sight.get("name") 
     })); 
    }); 

我的自定义组件具有以下代码，但由于getImageName（）函数而无法执行。它抱怨它没有被定义。但是，基于我对Sencha类结构的理解，它应该由构造函数在初始化时定义？

Ext.define("Parks.view.ImageView", { 
    extend: "Ext.Panel", 
    fullscreen: true, 

config: { 
    imageName: "", 
    titleName: "" 
}, 

constructor: function(config){ 
    this.initConfig(config); 
}, 

items: [ 
    { 
     xtype: "img", 
     layout: "fit", 
     src: getImageName() 
    } 
] 

}）;

Answer 1

在代码中隐藏另一个错误是有错误的。

首先，它应该是this.getImageName()。但即使如此，它不会工作，因为你需要this指向你的类的实例来调用这个方法（也许你应该阅读关于Javascript的范围有点......这是一个相当辛辣的主题！）。

在这里，你必须意识到你的函数将以前构造，甚至Ext.define为此事之前被调用（因为需要为在items对象的src财产的方法的返回值作为参数传递给Ext.define的对象的属性）。

当你需要做一些处理（即执行函数）来创建一个组件的配置，覆盖其initialize方法，像这样：

Ext.define("Parks.view.ImageView", { 
    extend: "Ext.Panel", 
    fullscreen: true, 


    config: { 
     imageName: "", 
     titleName: "", 
     layout: "fit" 
    }, 

// This is not needed, and it will break everything. You're extending from 
// a class that already calls initConfig for you. And you don't call the parent 
// method, so you're completely removing the component initialization cycle. 
// 
// constructor: function(config){ 
//  this.initConfig(config); 
// }, 

    initialize: function() { 

     // you should test that you have a value in imageName before using it 
     this.add({ 
      xtype: "img", 
      layout: "fit", 
      src: this.getImageName() 
     }); 

     // this one is probably not needed because the parent method is empty (it is 
     // is what Ext calls a template method), *but* it is more safe to call it 
     // anyway -- in case some override put some code in this method upper in 
     // the class hierarchy 
     this.callParent(arguments); 
    } 
}); 

编辑：我的答案适用于ExtJS的，它并没有与触摸...