0

我正在尝试将项目从构造函数添加到 Sencha Touch (2.0) 面板子类。下面的代码：

    Ext.define("MyApp.view.Icon", {
        extend: "Ext.Panel",
        config: {
            layout: "vbox" //ensures caption appears directly below image
        },
        constructor: function(cfg) {
            this.add(
                //First we add the icon image
                {
                   xtype: "image",
                   src: cfg.src,
                   width: cfg.width,
                   height: cfg.height
                },
                //Then we add the icon caption
                {
                   xtype: "panel",
                   html: cfg.caption
                }
            );
            return this;
        }
    });
    var anIcon = Ext.create("MyApp.view.Icon", {
                                             src: "http://placehold.it/80", 
                                             width: 100,
                                             height: 100,
                                             caption: "My Icon"});

这样做会给我错误：

Uncaught TypeError: Cannot call method 'has' of null

它似乎起源于this.add(). 我也试过this.self.add()了，还是不行。有没有办法从构造函数中插入元素？

4

2 回答 2

2

它实际上是@adis 所写内容的组合：

constructor: function(config) {
    this.callParent(config);
    this.add({...});
}

constructor 是定义构造函数的属性。而 callParent 用于将配置对象传递给父构造函数。

于 2012-03-06T08:41:06.780 回答
0

我会使用（请参阅此处initComponent()的API ）。请注意 API 文档中的这一行：

initComponent 方法必须包含对 callParent 的调用，以确保父类的 initComponent 方法也被调用。

所以我会去：

initComponent: function() {
     this.add(
            //First we add the icon image
            {
               xtype: "image",
               src: cfg.src,
               width: cfg.width,
               height: cfg.height
            },
            //Then we add the icon caption
            {
               xtype: "panel",
               html: cfg.caption
            }
        );

    this.callParent();
}

你试过这个吗？

更新 2012-01-30：对不起，我的错，确实阅读准确！

你做对了。为什么要this在构造函数中返回？我将通过调用替换该部分this.initConfig(cfg)：

constructor: function(cfg) {
        this.add(
            //First we add the icon image
            {
               xtype: "image",
               src: cfg.src,
               width: cfg.width,
               height: cfg.height
            },
            //Then we add the icon caption
            {
               xtype: "panel",
               html: cfg.caption
            }
        );
        this.initConfig(cfg);
    }
于 2012-01-31T08:00:23.830 回答