Nested initComponent not working - extjs

Question

I have a window(Ext.window.Window) in which I have pane in card layout. I am adding grid dynamically to the panels item as:
Ext.define('Example.view.ProcessInfoLayout',{
extend: 'Ext.window.Window',
requires: [
'Ext.layout.container.Card',
'Example.view.SubProcessController',
'Example.view.Info'
],
xtype: 'app--processinfolayout',
controller: 'main-content-subprocesscontroller',
layout: 'fit',
initComponent: function(){
this.callParent();
this.header = {
titlePosition: 0,
items:[{
xtype: 'button',
text: 'Resubmission',
glyph: 'xf0e2#FontAwesome',
tooltip: 'Resubmit',
listeners: {
click: 'ResubmissionClick'
}
}]
};
console.log('thisw')
this.items = []
this.add({
xtype: 'panel',
frame: false,
border: false,
itemId: 'v6panel',
layout: {
type:'card',
deferredRender: true
},
defaultListenerScope: true,
bbar: ['->',
{
itemId: 'card-prev',
text: '« Previous',
handler: 'showPrevious',
disabled: true
},
{
itemId: 'card-next',
text: 'Next »',
handler: 'showNext'
}
],
items: [],
initComponent: function() {
var me = this;
me.callParent();
me.store = Ext.getStore('app-main-store-' + me.up('app-main-processinfolayout').processData.id);
if (!me.store) {
me.store = Ext.create('Example.store.ProcessInfo', {
storeId: 'app-main-store-' + me.up('app-main-processinfolayout').processData.id,
room: me.up('app-main-processinfolayout').processData.id
});
me.store.proxy.url = Ext.String.format(me.store.proxy.url,
me.up('app-main-processinfolayout').processData.id);
}
me.store.on('load', function(store, records, successful, eOpts) {
console.log('####')
me.fireEvent('refreshProcessInfoLayoutView', me, records);
});
},
listeners:{
beforerender: function(obj) {
console.log('Hey Australia')
obj.store.load();
},
refreshProcessInfoLayoutView: 'refreshProcessInfoLayoutView',
scope: 'this'
},
refreshProcessInfoLayoutView: function(obj, records) {
console.log('thise')
console.log(records[0].data.processes)
if (records[0].data.v6_processes) {
for (elem in records[0].data.processes) {
var subprocessInfo = {
xtype: 'app-main-cycle-info',
processId: records[0].data.processes[elem],
itemId: 'card-' + elem
};
obj.add(subprocessInfo);
}
}
},
showNext: function () {
this.doCardNavigation(1);
},
showPrevious: function (btn) {
this.doCardNavigation(-1);
},
doCardNavigation: function (incr) {
var me = this;
var l = me.getLayout();
var i = l.activeItem.id.split('card-')[1];
var next = parseInt(i, 10) + incr;
l.setActiveItem(next);
me.down('#card-prev').setDisabled(next===0);
me.down('#card-next').setDisabled(next===this.down('#v6panel').store.getCount() - 1);
}
})
}
})
It prints console log upto thisw . After that it gives error as...Uncaught TypeError: me.items.insert is not a function. What I am doing wrong. Please suggest.

Answer 1

Don't do this.callParent(); in your initComponent before specifying this.header and this.items. Do it after. This is because once you've called this.callParent(); your component is instantiated, therefore trying stuff like this.items = [] just screws things up.
Also, instead of:
this.items = [];
this.add({stuff});
do:
this.items = [{stuff}];

Answer 2

When dealing with nested items and initComponent functions, you can use the xhooks config so that callParent() can work properly :
Ext.define('Example.view.ProcessInfoLayout', {
// ...
xhooks: {
initComponent: function(){
this.callParent();
// ...
this.add({
xtype: 'panel',
// ...
items: [],
initComponent: function() {
// ...
}
});
}
}
});
Have a look at the Ext.Component constructor method.