Question

我正在尝试浏览Sencha类系统，并且似乎在这方面失败了。

我有一个Carousel，我也在添加组件。我有一个带有记录的商店，我循环记录并在每次迭代中向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之前就被称为src（因为{{}需要你的方法的返回值1}}对象的属性，它作为参数传递给items的对象的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，但无法使用Touch ...

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

1 个答案: