Рекомендации по initComponent() в Ext.define()

Я пишу все свои компоненты в модуле ExtJS new MVC, используя Ext.define().

Я немного борюсь, определяю ли свойства внутри initComponent() или просто устанавливаю их как property: 42,.

Есть ли общепринятые лучшие практики?

Я обойдусь без использования initComponent() только тогда, когда это необходимо (т.е. когда я хочу что-то динамическое или задаю область), которая удерживает функцию короче и избавляет меня от уродливого this. и всегда использует ее, что мне никогда не придется переместить прежние свойства в initComponent() только потому, что я хочу сделать его более динамичным.

К сожалению, Sencha docs ничего не говорит об этом, и доступные примеры, похоже, делают, как они хотят.

Ответ 1

Личная практика, я объявлю переменные в области свойств, когда

переменные, определяющие величину, например x, y, width, height
которые ожидаются, чтобы быть переопределенными или настраиваемыми, например title, saveBtnTxt, url, fields, iconCls
некоторые константы, которые будут иметь специальные префиксы, поэтому не будут так легко переопределены.

Затем я объявлю items, listeners, this.on, Ext.apply(me, {..}) или что-нибудь, что требует рамки obj (this, me), чтобы сидеть внутри моего initComponent. Или вещи, которые должны быть изменены/отменены до того, как все будет настроено, чтобы пользователь не нарушил мой компонент, переопределив некоторые важные переменные.

Конечно, это послужит моим руководством. 2 цента

ИЗМЕНИТЬ

Об уродливом this, я широко использовал переменную me в своем приложении и выглядит намного чище, чем this. Это приносит мне пользу от изменения областей применения реже.

Ответ 2

Я хочу добавить к Lionel ответ, что лучше объявить любую не примитивную конфигурацию в initComponent. (По примитиву я имею в виду строку, булеву и число). Массив и объект перейдите в initComponent.
Поэтому определение должно выглядеть так:

Ext.define('My.NewClass', {
  extend: 'OldClass',
  // here all primitive configs:
  cls: 'x-my-cls',
  collapsible: true,
  region: 'west',
  // and so on ...

  initComponent: function() {
    // here you declare non-primitive configs:
    this.tbar = [/* blah-blah */];
    this.columns = [/* blah-blah */];
    this.viewConfig = {/* blah-blah */};
    // and so on ...

    this.callParent(arguments);
  }

  // other stuff
}

Причина, по которой вы должны поместить все не примитивные конфиги в initComponent, заключается в том, что в противном случае конфиги всех экземпляров будут ссылаться на одни и те же объекты. Например, если вы определяете NewClass как:

Ext.define('My.NewClass', {
  extend: 'OldClass',
  bbar: Ext.create('Ext.toolbar.Toolbar', {
  // ...

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

Ответ 3

Я не получаю ваш вопрос точно, но это может пригодиться вам.

  Ext.define('My.Group', {
// extend: 'Ext.form.FieldSet',
xtype : 'fieldset',
config : {
    title : 'Group' + i.toString(),
    id : '_group-' + i.toString()

},
constructor : function(config) {
    this.initConfig(config);

    return this;
},    
collapsible: true,
autoScroll:true,
.....
});

вы можете использовать его, как показано ниже.

handler : function() {                      
        i = i + 1;
        var group = new My.Group({
            title : 'Group' + i.toString(),
            id : '_group-' + i.toString()
        });
        // console.log(this);
        // console.log(group);
        Ext.getCmp('panelid').insert(i, group);
        Ext.getCmp('panelid').doLayout();
    }