Рекомендации по 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();
    }