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';
}
}
});
Надеюсь, это окажется полезным.
