extjs
Общие проблемы и лучшие практики

Разделение проблем

Хуже

ViewController:

// ...
myMethod: function () {
    this.getView().lookup('myhappyfield').setValue(100);
}
//...

Посмотреть:

//...
items: [
    {
        xtype: 'textfield',
        reference: 'myhappyfield'
    }
]
//...

Лучше

ViewController:

// ...
myMethod: function () {
    this.getView().setHappiness(100);
}
//...

Посмотреть:

//...
items: [
    {
        xtype: 'textfield',
        reference: 'myhappyfield'
    }
],
setHappiness: function (happiness) {
    this.lookup('myhappyfield').setValue(happiness);
}
//...

объяснение

В этом примере два фрагмента кода выполняют одну и ту же задачу. Однако в случае myhappyfield изменения ссылки на изменения myhappyfield или методологии определения «счастья», первый подход требует изменений в каждом месте ссылки.

С раздельными проблемами (последний пример), представление обеспечивает абстрактный способ изменить «счастье», которое могут использовать другие классы. Обработка запросов и компонентов хранится в одном месте (прямо рядом с самим представлением!), И призывы к абстрактному методу не нуждаются в изменении.

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

Расширить vs Переопределить

Заменяет:

Файл переопределения:

Ext.define('MyApp.override.CornField',
    override: 'Ext.form.field.Text',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

Использовать в приложении:

{
    xtype: 'textfield'
}

Расширения:

Файл переопределения:

Ext.define('MyApp.form.field.CornField',
    extend: 'Ext.form.field.Text',
    alias: 'widget.cornfield',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

Использовать в приложении:

{
    xtype: 'cornfield'
}

объяснение

ExtJS предоставляет два основных способа изменить поведение существующих классов: расширение их и переопределение. У каждого есть преимущества и недостатки, которые следует учитывать перед их использованием.

Расширение класса создает новый класс, который наследует его поведение и конфигурацию от своего родителя. Создавая новый класс через расширение, повторная конфигурация и поведенческие изменения могут быть сделаны в центральном месте и повторно использованы во всем приложении. Самое большое преимущество расширения заключается в том, что родительский класс остается неповрежденным и доступен для более простых случаев использования, когда расширенное поведение нежелательно.

Примеры хороших вариантов использования для расширений включают пользовательские поля форм со специальным поведением, специализированные модальные модели и пользовательские компоненты в целом.

Переопределение класса изменяет поведение существующего класса на месте. Конфигурация и методы в переопределении полностью заменяют их родительские классы, создавая новые конфигурации и поведение по умолчанию, которые заполняются во всем приложении. Переопределения следует использовать экономно из-за деструктивного характера их использования; расширенный класс может, как правило, предоставлять те же преимущества, оставляя без внимания родительский класс.

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

Отдельные переопределения от исправлений ошибок

В ExtJS вы можете переопределить практически любой метод фреймворка и заменить его на свой собственный. Это позволяет изменять существующие классы без прямого изменения исходного кода ExtJS.

Иногда вам может понадобиться улучшить существующий класс или обеспечить разумное свойство по умолчанию для класса.

Например, вы можете захотеть, чтобы все поля данных модели допускали нулевые значения.

Ext.define('MyApp.override.DataField', {
  override: 'Ext.data.field.Field',
  allowNull: true
});

В других случаях вам нужно исправить что-то, что нарушено в рамках.

Ниже приведен пример исправления ошибок с документацией. Обратите внимание, что имя класса содержит «fix», а не «override». Фактическое имя не важно, но разделение.

Ext.define('MyApp.fix.FieldBase', {
  override: 'Ext.form.field.Base',
  /**
   * Add a description of what this fix does.
   * Be sure to add URLs to important reference information!
   *
   * You can also include some of your own tags to help identify
   * when the problem started and what Sencha bug ticket it relates to.
   *
   * @extversion 5.1.1
   * @extbug EXTJS-15302
   */
  publishValue: function () {
    this.publishState('value', this.getValue());
  }
});

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