ExtJS 4: Каков правильный способ выполнения наследования

Мой код:

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/

Какой из приведенных выше методов является правильным способом создания объекта путем расширения существующего объекта? Каковы преимущества и недостатки каждого? Где я могу найти дополнительную информацию о наследовании ExtJS 4, кроме того, что уже здесь (http://docs.sencha.com/ext-js/4-0/#/guide/class_system)?

Спасибо,

Ответ 1

Я задал этот вопрос на форуме Sencha, и вот ответ, который я получил от Саки:

Используете ли вы конструктор или initComponent во время расширения о том, что вы хотите сделать. initComponent будет запускаться из родительского конструктор в любом случае, но позже, после некоторой внутренней переменной уже были инициализированы, поэтому в некоторых случаях вы хотите, чтобы иногда нет.

В любом случае я бы использовал renderTo в Ext.define, потому что он вызывает компонент, который будет отображаться сразу после создания экземпляра, и это не всегда то, что вы хотите. Кроме того, initConfig должен появиться перед родительским вызовите конструкторы, иначе это бесполезно, поскольку config был уже включен в родительский вызов.

Вы также можете прочитать "Написание большого..." в моей подписи. Эта документ был написан для предыдущей версии Ext, поэтому примеры кода не применяются, но принципы одинаковы.

Ответ 2

В соответствии с тем, что я нашел в ExtJS 4 до сих пор, следующим способом является расширение существующих компонентов (ниже приведен пример компонента, созданного на текстовом поле).

Я использую подход конструктора и до сих пор не обнаружил никаких проблем с ним:

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

Надеюсь, это окажется полезным.