Добавление данных в справочник

В ходе выполнения этого задания будет добавлена возможность добавления новых записей в таблицу.

Шаг 1: Добавление обработчика создания новой записи в таблице

В файле PhoneBook.ts добавьте следующий код:

// TypeScript
protected _onAddButtonClick(): void {
    this._children.gridView.beginAdd(null);
}

Здесь у таблицы вызывается метод beginAdd(), который выполняет создание новой записи.

Шаг 2: Добавление кнопки Button в шаблон

В файл PhoneBook.wml ниже списка добавьте описание кнопки "Новая запись". Для создания кнопки используем контрол Controls/button:Button. Подробнее о работе с контролом читайте здесь.

<!-- WML -->
<div>
   <Controls.grid:View ...>
      ...
   </Controls.grid:View>
   <Controls.buttons:Button
      caption="Новая запись"
      icon="icon-NewCategory"
      iconSize="s"
      on:click="_onAddButtonClick()"/>
</div>

Конфигурация кнопки такова:

  • caption — надпись на кнопке.
  • icon — определяет иконку, которая будет отображена в контроле.
  • iconSize — задает размер иконки.
  • on:click — добавлен обработчик, который при клике вызывает функцию _onAddButtonClick(). Подробнее о работе с событиями контролов в Wasaby читайте здесь.

Шаг 3: Сборка приложения и проверка результата

  1. Запустите командную строку от имени администратора.
    • Перейдите в директорию проекта.
    • Выполните следующие команды:
      npm run build
      npm start
  2. В браузере перейдите по ссылке: http://localhost:8080/PhoneBook-demo
  3. Результат должен быть таким как на изображении ниже.

Можете сверить результат освоения этого задания с файлами репозитория

Что дальше?

Переходите к следующему уроку