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

我的代码:

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 继承的更多信息？

谢谢，

最佳答案

我在 Sencha 论坛上问过这个问题，这是我从 Saki 那里得到的答案:

关于inheritance - ExtJS 4 : What is the Proper Way to Perform Inheritance，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6555136/