ExtJS 4: Как правильно наследовать

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/

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

Спасибо

Answer 1

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

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

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

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

Надеюсь, это поможет.