Понятие элемента управления

1. Создать модуль 

1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема.

2. На панели инструментов реестра раздела нажмите Добавить —> Модуль (Add —> Module).

   

3. В дизайнере модуля заполните свойства схемы:

   • Код (Code) — "UsrLimitedIntegerEdit".
   • Заголовок (Title) — "LimitedIntegerEdit".
   

   Для применения заданных свойств нажмите Применить (Apply).

4. В дизайнере модуля добавьте исходный код.

   • Кроме стандартных свойств extend и alternateClassName, задайте диапазон допустимых значений (свойства minLimit и maxLimit). В качестве значений свойств используйте значения по умолчанию.
   • Реализуйте бизнес-логику элемента управления. Для этого переопределите метод onEnterKeyPressed(). После вызова базовой логики, в которой выполняется генерация событий изменения значения, реализуйте метод isOutOfLimits(). Метод проверяет входжение введенного значения в диапазон допустимых значений. Если число не входит в диапазон, то в поле ввода отобразите предупреждающее сообщение.

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

   UsrLimitedIntegerEdit

   /* Объявление модуля с именем UsrLimitedIntegerEdit. Модуль не имеет никаких зависимостей, поэтому в качестве второго параметра передается пустой массив. */
   define("UsrLimitedIntegerEdit", [], function () {
       /* Объявляет класс элемента управления. */
       Ext.define("Terrasoft.controls.UsrLimitedIntegerEdit", {
           /* Базовый класс. */
           extend: "Terrasoft.controls.IntegerEdit",
           /* Псевдоним класса. */
           alternateClassName: "Terrasoft.UsrLimitedIntegerEdit",
           /* Минимальное допустимое значение. */
           minLimit: -1000,
           /* Максимальное допустимое значение. */
           maxLimit: 1000,
           /* Проверяет вхождение введенного значения в диапазон допустимых значений. */
           isOutOfLimits: function (numericValue) {
               if (numericValue < this.minLimit || numericValue > this.maxLimit) {
                   return true;
               }
               return false;
           },
           /* Переопределяет метод-обработчика события нажатия клавиши Enter. */
           onEnterKeyPressed: function () {
               /* Вызывает базовую функциональность. */
               this.callParent(arguments);
               /* Получает введенное значение. */
               var value = this.getTypedValue();
               /* Приводит значение к числовому типу. */
               var numericValue = this.parseNumber(value);
               /* Проверяет вхождение введенного значения в диапазон допустимых значений. */
               var outOfLimits = this.isOutOfLimits(numericValue);
               if (outOfLimits) {
                   /* Генерирует предупреждающее сообщение. */
                   var msg = "Value " + numericValue + " is out of limits [" + this.minLimit + ", " + this.maxLimit + "]";
                   /* Изменяет конфигурационный объект, чтобы отобразить предупреждающее сообщение. */
                   this.validationInfo.isValid = false;
                   this.validationInfo.invalidMessage = msg;
               }
               else{
                   /* Изменяет конфигурационный объект, чтобы скрыть предупреждающее сообщение. */
                   this.validationInfo.isValid = true;
                   this.validationInfo.invalidMessage ="";
               }
               /* Вызывает логику отображения предупреждающего сообщения. */
               this.setMarkOut();
           },
       });
   });
   

5. На панели инструментов дизайнера модуля нажмите Сохранить (Save).

2. Добавить элемент управления на страницу контакта 

1. Перейдите в раздел Конфигурация (Configuration) и выберите пользовательский пакет, в который будет добавлена схема.

2. На панели инструментов реестра раздела нажмите Добавить —> Замещающая модель представления (Add —> Replacing view model).

   

3. Заполните свойства схемы.

   • Код (Code) — "ContactPageV2".
   • Заголовок (Title) — "Схема отображения карточки контакта" ("Display schema - Contact card").
   • Родительский объект (Parent object) — выберите "ContactPageV2".
   

4. В дизайнере модуля добавьте исходный код.

   • В свойство attributes добавьте атрибут ScoresAttribute, который привязан к значению поля ввода элемента управления. Вместо атрибута можно использовать целочисленную колонку объекта, который связан со схемой страницы записи.

   • В массив модификаций diff добавьте конфигурационный объект, который определяет значения свойств экземпляра элемента управления.

     • Привяжите значение свойства value к атрибуту ScoresAttribute.
     • Задайте диапазон допустимых значений (свойства minLimit и maxLimit). Если в конфигурационном объекте явно не указать свойства minLimit и maxLimit, то по умолчанию используется диапазон допустимых значений [-1000; 1000].

   Исходный код схемы замещающей модели представления страницы контакта представлен ниже.

   ContactPageV2

   /* Объявление модуля. В качестве зависимости укажите модуль, в котором объявлен класс элемента управления. */
   define("ContactPageV2", ["UsrLimitedIntegerEdit"], function () {
       return {
           attributes: {
               /* Атрибут, который привязан к значению элемента управления. */
               "ScoresAttribute": {
                   /* Тип данных атрибута — целочисленный. */
                   "dataValueType": this.Terrasoft.DataValueType.INTEGER,
                   /* Тип атрибута — виртуальная колонка. */
                   "type": this.Terrasoft.ViewModelColumnType.VIRTUAL_COLUMN,
                   /* Значение по умолчанию. */
                   "value": 0
               }
           },
           diff: /**SCHEMA_DIFF*/[
               {
                   "operation": "insert",
                   "parentName": "ProfileContainer",
                   "propertyName": "items",
                   "name": "Scores",
                   "values": {
                       "contentType": Terrasoft.ContentType.LABEL,
                       "caption": {"bindTo": "Resources.Strings.ScoresCaption"},
                       "layout": {
                           "column": 0,
                           "row": 6,
                           "colSpan": 24
                       }
                   }
               },
               {
                   /* Выполняется операция добавления элемента на страницу. */
                   "operation": "insert",
                   /* Мета-имя родительского контейнера, в который добавляется поле. */
                   "parentName": "ProfileContainer",
                   /* Поле добавляется в коллекцию элементов родительского элемента. */
                   "propertyName": "items",
                   /* Мета-имя колонки схемы, к которой привязан компонент. */
                   "name": "ScoresValue",
                   /* Свойства, передаваемые в конструктор элемента. */
                   "values": {
                       /* Тип элемента управления — компонент. */
                       "itemType": Terrasoft.ViewItemType.COMPONENT,
                       /* Название класса. */
                       "className": "Terrasoft.UsrLimitedIntegerEdit",
                       /* Свойство value компонента связано с атрибутом ScoresAttribute. */
                       "value": { "bindTo": "ScoresAttribute" },
                       /* Значения свойства minLimit. */
                       "minLimit": -300,
                       /* Значения свойства maxLimit. */
                       "maxLimit": 300,
                       /* Настройка расположения компонента в контейнере. */
                       "layout": {
                           /* Номер столбца. */
                           "column": 0,
                           /* Номер строки. */
                           "row": 6,
                           /* Диапазон занимаемых столбцов. */
                           "colSpan": 24
                       }
                   }
               }
           ]/**SCHEMA_DIFF*/
       };
   });
   

5. На панели инструментов дизайнера нажмите Сохранить (Save).

Результат выполнения примера 

Чтобы посмотреть результат выполнения примера:

1. Откройте страницу контакта.
2. В поле Scores введите значение, которое не входит в диапазон допустимых значений.

В результате выполнения примера на странице контакта отображается соответствующее предупреждение.

1. Подключить миксин 

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

mixins: {
    SourceCodeEditMixin: "Terrasoft.SourceCodeEditMixin"
},

2. Реализовать абстрактные методы миксина 

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

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

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

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

3. Вызвать метод openSourceCodeBox() 

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

onSourceButtonClick: function () {
    this.mixins.SourceCodeEditMixin
      .openSourceCodeBox.call(this);
},

4. Реализовать метод удаления миксина 

После завершения работы с экземпляром основного класса происходит его удаление из памяти. Так как 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);
          }
      });
  });