Общие сведения

При разработке элементов управления иногда возникает необходимость реализовать функциональность редактирования строкового значения, содержащего HTML, JavaScript или LESS код. Для реализации такой возможности создан класс SourceCodeEditMixin.

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

Свойства и методы SourceCodeEditMixin

Основные свойства класса SourceCodeEditMixin приведены в таблице 1, а его методы — в таблице 2.

Табл. 1. — Свойства миксина SourceCodeEditMixin

Табл. 2. — Основные методы миксина SourceCodeEditMixin

Основные свойства, с которыми будет создан экземпляр элементов управления редактора исходного кода (см. метод getSourceCodeEditConfig), приведены в таблице 3.

Табл. 3. — Свойства, с которыми может быть создан редактор исходного кода

Табл. 4. — Синтаксис языков, с которыми работает редактор исходного кода (SourceCodeEditEnums.Language)

Табл. 5. — Темы редактора исходного кода (SourceCodeEditEnums.Theme)

Пример использования

Для использования миксина в элементе управления необходимо добавить его в свойстве mixins:

// Подключение миксина.
mixins: {
    SourceCodeEditMixin: "Terrasoft.SourceCodeEditMixin"
},

Функциональность миксина получает значение, вызывая абстрактный getter-метод getSourceCodeValue(), задача которого — вернуть строку для редактирования. В каждом конкретном случае "подмешивания" функциональности должен быть реализован свой getter-метод:

// Реализация метода получения строкового значения.
getSourceCodeValue: function () {
    // Метод getValue() реализован в базовом классе Terrasoft.BaseEdit.
    return this.getValue();
},

После завершения редактирования миксин вызовет абстрактный setter-метод setSourceCodeValue() для сохранения результата. В каждом конкретном случае "подмешивания" функциональности должен быть реализован свой setter-метод.

// Реализация метода установки результирующей строки.
setSourceCodeValue: function (value) {
    // Метод setValue() реализован в базовом классе Terrasoft.BaseEdit.
    this.setValue(value);
},

Для открытия окна редактирования исходного кода нужно вызвать метод миксина openSourceCodeBox(). Следует обратить внимание на то, что метод вызван в контексте экземпляра основного класса. Например, при вызове метода onSourceButtonClick компонента.

// Реализация вызова метода открытия окна редактора исходного кода.
onSourceButtonClick: function () {
    this.mixins.SourceCodeEditMixin
      .openSourceCodeBox.call(this);
},

После завершения работы с экземпляром основного класса происходит его удаление из памяти. Так как SourceCodeEditMixin требует определенных ресурсов, их также необходимо освободить. Для этого вызывается метод миксина destroySourceCode в контексте экземпляра основного класса.

onDestroy: function () {
    this.mixins.SourceCodeEditMixin
      .destroySourceCode.apply(this, arguments);
    this.callParent(arguments);
}

Полный исходный код примера:

// Добавление модуля миксина в зависимости
define("SomeControl", ["SomeControlResources", "SourceCodeEditMixin"],
  function (resources) {
      Ext.define("Terrasoft.controls.SomeControl", {
          extend: "Terrasoft.BaseEdit",
          alternateClassName: "Terrasoft.SomeControl",

          // Подключение миксина.
          mixins: {
              SourceCodeEditMixin: "Terrasoft.SourceCodeEditMixin"
          },

          // Реализация метода получения строкового значения.
          getSourceCodeValue: function () {
              // Метод getValue() реализован в базовом классе Terrasoft.BaseEdit.
              return this.getValue();
          },

          // Реализация метода установки результирующей строки.
          setSourceCodeValue: function (value) {
              // Метод setValue() реализован в базовом классе Terrasoft.BaseEdit.
              this.setValue(value);
          },

          // Реализация вызова метода открытия окна редактора исходного кода.
          onSourceButtonClick: function () {
              this.mixins.SourceCodeEditMixin
                .openSourceCodeBox.call(this);
          },

          // Реализация вызова очистки ресурсов миксина.
          onDestroy: function () {
              this.mixins.SourceCodeEditMixin
                .destroySourceCode.apply(this, arguments);
              this.callParent(arguments);
          }
      });
  });