Adding items to Sencha Touch Panel through the Constructor

Question

I'm trying to add items to a Sencha Touch (2.0) panel child class from the constructor. The code below:

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

Doing this gives me the error:

Uncaught TypeError: Cannot call method 'has' of null

And it appears to originate from this.add(). I have also tried this.self.add(), which also doesn't work. Is there no way to insert elements from the constructor?

Answer 1

It's actually a combination of what @adis wrote:

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

constructor is the property on which the constructor is defined. And callParent is used to pass the config object to the parent constructor.

Answer 2

I would use the initComponent() (see API here). Note this line on the API docs:

The initComponent method must contain a call to callParent in order to ensure that the parent class' initComponent method is also called.

So I would go for:

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

Did you tried this?

UPDATE 2012-01-30: Sorry, my bad, did read precisely!

You have done it the right way. Why are you returning this in the constructor? I would replace that part by calling 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);
    }