Extending own classes - class

Question

i am develop an app with several windows. Many windows are similar, so i think write a superclass, and extend it.
I have, the superclass:
Ext.define('AM.view.ui.DecoratorAbstract',{
extend: 'Ext.window.Window',
alias: 'widget.decoratorAbstract',
initComponent: function(){
this.title = this.aTitle;
this.resizable = this.cfg[0];
this.closable = this.cfg[1];
this.minimizable = this.cfg[2];
//this.items = this.anItem;
this.callParent(arguments);
}
});
And the subclass:
Ext.define('AM.view.ui.DecoratorForm',{
extend: 'AM.view.ui.DecoratorAbstract',
alias: 'widget.decoratorForm',
initComponent: function(){
this.callParent();
this.buttons = [
{ text:'Guardar', action:'save', iconCls: 'ico-save' },
{ text:'Cancelar', action:'cancel', iconCls: 'ico-cancel' }
];
}
});
Both classes are included in the Controller:
Ext.define('AM.controller.Ui',{
extend: 'Ext.app.Controller',
views: [
'ui.Toolbar',
'ui.Statusbar',
'ui.AlertErr',
'ui.AlertOk',
'ui.AlertWar',
'ui.AlertDelete',
'ui.AlertUndelete',
'ui.DecoratorAbstract',
'ui.DecoratorForm',
'ui.DecoratorGrid'
],
model: [],
store: [],
});
From the Firebug js console i create the subclass:
Ext.create('AM.view.ui.DecoratorForm',{cfg:[true,true,true],aTitle: 'Title'}).show();
The window is showed but, not the buttons.
Any ideas ?.

Answer 1

There are a few things here... First, move this.callParent() to the end of your initComponent. This is because the initComponent further up the inheritance does something with this.buttons, and you are missing out on that by calling callParent before setting the buttons.
Next, you really shouldn't use this cfg thing that you are passing in. Just pass in the config parameters that you want to use, and they will be available:
Ext.define('AM.view.ui.DecoratorAbstract',{
extend: 'Ext.window.Window',
alias: 'widget.decoratorAbstract',
initComponent: function(){
this.callParent(arguments);
}
});
Ext.define('AM.view.ui.DecoratorForm',{
extend: 'AM.view.ui.DecoratorAbstract',
alias: 'widget.decoratorForm',
initComponent: function(){
this.buttons = [
{ text:'Guardar', action:'save', iconCls: 'ico-save' },
{ text:'Cancelar', action:'cancel', iconCls: 'ico-cancel' }
];
this.callParent();
}
});
//to instantiate:
Ext.create('AM.view.ui.DecoratorForm',{
resizable: true,
closable: true,
minimizable: true,
title: 'Title'
}).show();
Anytime you are trying to "trick" the component by using something like that cfg array, you should probably re-think what you're doing and see if there's a smarter way.
One other thing you should look into using is Ext.apply(). It will save a lot of bytes by changing what you had before into something like this:
Ext.apply(this, {
title: 'my title',
resizable: cfg[0],
closable: cfg[1],
///...etc...
})

Answer 2

What if you move
this.callParent(arguments);
To the end of initComponent in your DecoratorForm.