ExtJS 4: Jaki jest właściwy sposób wykonać Dziedziczenie

Question

Mój kod:

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

})

Wyniki (przez JSFiddle.net): http://jsfiddle.net/HtPtt/

Która z powyższych metod jest poprawny sposób na stworzenie obiektu poprzez rozszerzenie istniejącego obiektu? Jakie są zalety i wady każdego z nich? Gdzie mogę znaleźć dalsze informacje o dziedziczeniu ExtJS 4 innym niż to, co już jest tutaj (http://docs.sencha.com/ext-js/4-0/#/guide/class_system)?

Dzięki,

Answer 1

I zadał to pytanie na forum, Sencha i oto odpowiedź dostałem od Saki:

Czy używasz konstruktora lub initComponent jednocześnie przedłużając zależy na tym, co chcesz zrobić. initComponent i tak będzie uruchamiany z konstruktora nadrzędnego , ale później, po zainicjowaniu pewnej zmiennej wewnętrznej , tak w niektórych przypadkach nie będzie to konieczne, czasami .

W żadnym przypadku nie użyłbym renderTo w Ext.define, ponieważ powoduje, że komponent jest renderowany natychmiast po utworzeniu i to jest nie zawsze, co chcesz. Również initConfig powinien nadejść przed rodzicem wywołanie w konstruktorach, w przeciwnym razie jest to bezużyteczne, ponieważ konfiguracja została już zaindeksowana w wywołaniu nadrzędnym.

Możesz również chcieć przeczytać "Pisanie dużego ..." w moim podpisie. Ten dokument został napisany dla wcześniejszej wersji Ext, więc przykłady kodu nie są już stosowane, ale zasady są takie same.

Answer 2

Co do rzeczy znalezionych przeze mnie w ExtJS 4 do tej pory, poniżej jest sposób, w jaki rozszerzam istniejące komponenty (poniżej jest przykładowy komponent utworzony na polu tekstowym).

używam podejścia konstruktora i do tej pory nie stwierdzono żadnych problemów z nim:

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

Nadzieja to okaże się pomocne.