ExtJS6 Extending Components - extjs6-classic

Question

If I declare a custom component, how to I correctly apply changes to the properties when I create an extension of the component? For example:
Ext.define('GridForm',{
extend: 'Ext.window.Window',
initComponent: function(){
Ext.apply(this,{
title: 'This a test window!'
,height: 400
,width: 400
});
this.callParent();
}
});
Ext.define('LedDataForm',{
extend: 'GridForm',
initComponent: function(){
Ext.apply(this,{
title: 'OK, I want to change it to this.'
});
this.callParent();
}
});
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create('LedDataForm').show();
}
});
In this example, I simply want to change the title of the window when I create "LedDataForm". All comments are appreciated.

Answer 1

Don't write the configs whatever you want to override in init function, instead give it as a default config.
Ext.define('GridForm',{
extend: 'Ext.window.Window',
title: 'This a test window!',// Give this as configs rather than in init function
initComponent: function(){
Ext.apply(this,{
width:400,
height:400
});
this.callParent();
}
});
Ext.define('LedDataForm',{
extend: 'GridForm',
title: 'OK, I want to change it to this.',
initComponent: function(){
Ext.apply(this,{
});
this.callParent();
}
});
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create('LedDataForm',{
title:'testing'
}).show();
}
});

Answer 2

Why not do this:
Ext.define('GridForm',{
extend: 'Ext.window.Window',
title: 'This a test window!',
height: 400,
width: 400
});
Ext.define('LedDataForm',{
extend: 'GridForm',
title: 'OK, I want to change it to this.'
});
Ext.application({
name : 'MyApp',
launch : function() {
Ext.create('LedDataForm').show();
}
});
Simple static configuration can be applied to the class body (2nd argument passed to Ext.define).
initComponent is usually only necessary if you need to calculate values or execute initialization logic.
Also, you could take a look here as it explains a lot: The Class System.