items is undefined during different component initialization

[whalethewise]

Hi

In 4.0.7 I was able to add child components in initComponent function. For example for Tab Panel

Now with 4.1 it gives me 'items is undefined' error in getRefItems() function of AbstractContainer when I do not specify items in the config init and trying to add it in initComponent function for this TabPanel. Any suggestions?

Thanks



Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
initComponent: function() {
this.items = [{ title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]


this.callParent(arguments);
}
});

[evant]

You really shouldn't be overriding a method inline like that, what's the reasoning for doing so?

[whalethewise]

it was my understanding that using initcomponent is a safe approach if I would like initialize something before instanriate. or I can do it only for define?

[skirtle]

Overriding initComponent in an Ext.define is fine, just not in Ext.create.

Generally, overriding a method in an Ext.create is bad practice but occasionally it is very convenient. If you do it directly (the way you have in your example) then callParent won't work correctly, or at least not reliably. 4.1 introduces a concept called xhooks to solve this problem. Take a look at Don's SenchaCon video for more info on this.