Sencha Touch - Why Is This Function Undefined in my Custom Component?

Question

I'm trying to navigate the Sencha class system, and seem to be failing in this aspect.

I have a Carousel that I'm adding Components too. I have a Store with records, and I'm looping through the records and adding a custom Component to the Carousel in each iteration. Here's the code for that...

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

My custom Component has the following code, but is failing to execute because of the getImageName() function. It's complaining it's not defined. But, based on my understanding of the Sencha class structure, it should have been defined by the constructor on initialization?

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

});

rixo rixo · Accepted Answer · 2014-02-12T22:56:46

There's a mistake hiding another mistake in your code.

First, it should be this.getImageName(). But even then it will not work because you need this to point to an instance of your class to call this method (maybe you should read about scope in Javascript a bit... That's quite a spicy subject!).

Here, you must realize that your function will be called before the constructor, and even before Ext.define for that matter (because the return value of your method is needed for the src property of the object that is in the items property of the object that you pass as argument to Ext.define).

When you need to do some processing (i.e. execute a function) to create the configuration of a component, override its initialize method, like this:

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

Edited: my answer applied to ExtJS, it didn't work with Touch...

Sencha Touch - Why Is This Function Undefined in my Custom Component?

1 Answers