通过Constructor向Sencha触摸面板添加项目

Question

我正试图从构造函数向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

它似乎起源于CCD_ 2。我也试过this.self.add()，它也不起作用。没有办法从构造函数中插入元素吗？

Answer 1

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

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

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

Answer 2

我将使用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);
    }