Extjs undefined method when extending through define

Question

Can any tell me why i keep getting a method buildItems not defined in the following code? Am i escaping something essential?

Ext.define('MyApp.view.Viewport', { 
extend: 'Ext.container.Viewport',
requires: [
    'Ext.layout.container.Border'
],

layout  : 'border',
items   : [this.buildItems()],

buildItems      : function() {
    return { region:'center',xtype:'panel'}
}
});

The buildItems method has no reason to be a public method, i was only trying this way first. This is the way i'm doing it now:

(function() {
function buildItems () {
    return [
            {
                region  : 'center',
                xtype   : 'panel',
            }, {
                region  : 'west',
                xtype   : 'panel',
                width   : 225
            },{
                region  : 'south',
                xtype   : 'panel',
                height  : 50
            },{
                region  : 'north',
                xtype   : 'panel',
                height  : 50
            }
    ]   
}

return Ext.define('MyApp.view.Viewport', { 
    extend: 'Ext.container.Viewport',
    requires: [
        'Ext.layout.container.Border'
    ],

    layout  : 'border',
    items   : buildItems()
});
})();

Is this an overstretch?

thx

Answer 1

The problem is: At the time of execution of the line

items   : [this.buildItems()],

the scope is the Global Object, ie this evaluates to window . You should not put items into a class anyway, since the instances may modify the item 's items, so the right way to do it is

initComponent: function () {
    this.items = this.buildItems(); // now, "this" is the current component instance
    // superclass.initComponent...
}

---

Edit: As an answer to the second part of the question

This has been discussed a million times, and there's nothing wrong with making that helper function private. I personally tend to keep methods public, since that increases readability of the code. Usually I use doc comments ( @private ) as a marker, and quite simply avoid calling supposedly private methods. I think this is not a big deal, since I'm mostly not building libraries or anything reusable for third-party developers.

Answer 2

It is because the function is defined in another function and the viewport will be accessed outside this self-executing function. So, put this buildItems() outside the self-executing function and try the same.