ExtJS 4: What is the Proper Way to Perform Inheritance

Question

My code:

Ext.onReady(function() { // Every property is declared inside the class
Ext.define('MyCustomPanel1', {
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel1',
    title: 'I am a custom Panel 1',
    html: 'This is the content of my custom panel 1',
    renderTo: Ext.getBody()
});    


Ext.define('MyCustomPanel2', { // HTML is declared inside the class, title inside the config, constructor overridden
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel2',
    renderTo: Ext.getBody(),        
    html: 'This is the content of my custom panel 2',        
    config: {
        title: 'I am a custom Panel 2'
    },
    constructor: function(config) {
        this.callParent(arguments);
        this.initConfig(config)
    }
});        


Ext.define('MyCustomPanel3', { // Title and HTML declared inside config, constructor overridden
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel3',
    renderTo: Ext.getBody(),        
    config: {
        title: 'I am a custom Panel 3',
        html: 'This is the content of my custom panel 3'
    },
    constructor: function(config) {
        this.callParent(arguments);
        this.initConfig(config)
    }
});

Ext.define('MyCustomPanel4', { // title and html inside of initComponent, title override in instance declaration doesn't hold. HTML property is empty on render
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel4',
    renderTo: Ext.getBody(),        
    initComponent: function(config) {
        Ext.apply(this, {
            title: 'I am a custom Panel 4',
            html: 'This is the content of my custom panel 4'                
        })
        this.callParent(arguments);
    }
});            
Ext.define('MyCustomPanel5', { // title declared inside config, html set inside of initComponent. Both initComponent and constructor are used.
    extend: 'Ext.panel.Panel',
    alias: 'mycustompanel5',
    renderTo: Ext.getBody(),        
    config: {
        title: 'I am a custom Panel 5'
    },
    constructor: function(config) {
        this.callParent(arguments);
        this.initConfig(config);
    },
    initComponent: function(config) {
        Ext.apply(this, {
            html: 'This is the content of my custom panel 5'                
        })
        this.callParent(arguments);
    }
});                
Ext.create('MyCustomPanel1', {
    title: 'I am custom Panel 1 - Instance!',
    html: 'This is the content of my custom panel 1 - Instance!'
})
Ext.create('MyCustomPanel2', {
    title: 'I am custom Panel 2 - Instance!',
    html: 'This is the content of my custom panel 2 - Instance!'
})
Ext.create('MyCustomPanel3', {
    title: 'I am custom Panel 3 - Instance!',
    html: 'This is the content of my custom panel 3 - Instance!'
})
Ext.create('MyCustomPanel4', {
    title: 'I am custom Panel 4 - Instance!',
    html: 'This is the content of my custom panel 4 - Instance!'
})
Ext.create('MyCustomPanel5', {
    title: 'I am custom Panel 5 - Instance!',
    html: 'This is the content of my custom panel 5 - Instance!'
})

})

Results (via JSFiddle.net): http://jsfiddle.net/HtPtt/

Which of the above methods is the correct way to create an object by extending an existing object? What are the advantages and disadvantages of each? Where can I find further information on ExtJS 4 inheritance other than what is already here (http://docs.sencha.com/ext-js/4-0/#/guide/class_system)?

Thanks,

Answer 1

I asked this question on the Sencha forum and here's the answer I got from Saki:

Whether you use constructor or initComponent while extending depends on what you want to do. initComponent will run from the parent constructor anyway, but later, after some internal variable have already been initialized, so in some cases you want that, sometimes not.

In no case I would use renderTo in Ext.define because it causes the component to be rendered immediately after instantiation and that is not always what you want. Also, initConfig should come before parent call in constructors, otherwise it's useless as config has been already inited in the parent call.

You may also want to read "Writing a big..." in my signature. This document was written for a previous version of Ext so code examples do not apply anymore but principles are same.

Answer 2

As per the things found by me at ExtJS 4 so far, following is the way in which I extend existing components (below is a sample component created on textfield).

I use the constructor approach and so far have not found any issues with it:

Ext.define('Ext.pnc.Textfield', {

extend: 'Ext.form.field.Text',

alias: 'widget.pnctextfield',

config:{
    focusCls:'focusClassFieldPnC',
    fieldCls:'baseClassFieldPnC'
},

constructor:function(cfg){
    this.callParent(arguments);
    this.initConfig(cfg);
    this.on('beforerender',this.beforeRender);
},

beforeRender:function(){
    if(!this.allowBlank){
        this.labelStyle = 'color:#ff0000';
    }
}
});

Hope this proves to be of help.