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

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

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

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

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

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

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

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

<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. Результат должен быть таким как на изображении ниже.

Что дальше?

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