How to properly define properties in ExtJS custom class - extjs

Question

I am attempting to create a reusable title bar for our grids. This will require a couple of properties which can be set when the grid title bar is used. The problem I am running into is that the property is undefined when I attempt to use it.
I looked at how ExtJS appears to do this and saw that they set up their properties in the config block. So I tried that with no luck. I have also tried removing the config block and adding the property with the same result.
Ext.define('ERM.view.mastersite.GridTitleBar', {
extend: 'Ext.TitleBar',
xtype: 'gridtitlebar',
margin: '0 0 20 0',
shadow: true,
cls: 'x-big',
style: {
border: 'solid lightgrey 2px'
},
config: {
addNewToolTip: 'test',
},
items: [{
xtype: 'button',
iconCls: 'md-icon-add-circle',
text: 'Add',
align: 'right',
tooltip: this.parent.addNewToolTip,
}],
});
I'm expecting the tool tip to show "test" by default, or if the default is overridden, I'm expecting it to show the overridden string.
Edit
Second attempt based on the answers below.
Ext.define('ERM.view.mastersite.GridTitleBar', {
extend: 'Ext.TitleBar',
xtype: 'gridtitlebar',
margin: '0 0 20 0',
shadow: true,
cls: 'x-big',
style: {
border: 'solid lightgrey 2px'
},
config: {
addNewToolTip: 'test',
},
initialize: function () {
const me = this;
me.items = [{
xtype: 'button',
text: 'Add',
iconCls: 'md-icon-add-circle',
tooltip: me.getAddNewToolTip(),
}];
this.callParent();
},
});

Answer 1

if you are using modern toolkit use initialize method instead of initComponent

Answer 2

You're correctly defining the property. Your problem is the way you are accessing it.
At the time of building the items construct, the this context is whatever has loaded the file - probably the boot loader. Strangely enough, that won't have your new property.
In order to access properties of your new class/object, you need to define the items construct after the object is created. One good location for that is in the initComponent method.
Ext.define('ERM.view.mastersite.GridTitleBar', {
// in here, the 'this' context is whatever loaded the file.
...
config: {
addNewToolTip: 'test',
},
...
initComponent: function() {
// In here, like most methods in ExtJS, the 'this' context is the owning instance.
this.items = [{
xtype: 'button',
...
// Oh, and it's a good idea to use the accessors for config variables
tooltip: this.getAddNewToolTip()
}]
// don't forget to call the parent.
this.callParent(arguments);
});