Adding more items to an Extended class before invoking the parent

[rondinos]

Let's say I have a view like this



Ext.define('MyApp.view.ui.MyPanel', {
extend: 'Ext.panel.Panel',

height: 250,
width: 400,
title: 'My Panel',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
items: [
{
xtype: 'button',
text: 'MyButton'
}
]
});

me.callParent(arguments);
}
});

And I want to add one more button before I invoke the parent class implementation


Ext.define('MyApp.view.button.List', {
extend: 'MyApp.view.ui.MyPanel',
alias: 'widget.buttonlist',
initComponent: function() {
var me = this;

var button = {
xtype: 'button',
text: 'MyButton2'
},
//TODO add the extra button before calling parent

me.callParent(arguments);

}
});

[vietits]

To add more items, you should push them on the <container>.items array. With your example code, you should do the similar thing as in red color:

Ext.define('MyApp.view.button.List', {
extend: 'MyApp.view.ui.MyPanel',
alias: 'widget.buttonlist',
initComponent: function() {
var me = this;

// make sure items is an array
me.items = me.items ? (Ext.isArray(me.items) ? me.items : [me.items]) : [];
me.items.push({
xtype: 'button',
text: 'MyButton2'
});

me.callParent(arguments);
}
});

[rondinos]

Hello,

Thank you very much for the response but I have already tried that and it didn't work.

me.items is null before calling the parent

For some reason, the whole superclass is there but the items are missing, I am guessing because they are also applied in initComponent and it hasn't initialized yet, but this file is generated by Ext Designer and I don't want to modify it. I was wondering if there is any way to add items.

[skirtle]

The standard way to do this is with a template method but that's not an option if the superclass is from Designer.

Why are you trying to add items like this? Why not add them in Designer? There may be a good reason for it but I'd like to know what your motivation is before making any suggestions.