inheritance - ExtJS 4 : What is the Proper Way to Perform Inheritance

Question

我的代码:

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!'
})

})

结果(通过 JSFiddle.net): http://jsfiddle.net/HtPtt/

上述哪种方法是通过扩展现有对象来创建对象的正确方法？各自的优缺点是什么？除了这里已经提供的信息 (http://docs.sencha.com/ext-js/4-0/#/guide/class_system) 之外，我在哪里可以找到有关 ExtJS 4 继承的更多信息？

谢谢，

Answer 1

我在 Sencha 论坛上问过这个问题，这是我从 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.