Добавление данных в справочник
В ходе выполнения этого задания будет добавлена возможность добавления новых записей в таблицу.
Шаг 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: Сборка приложения и проверка результата
- Запустите командную строку от имени администратора.
- Перейдите в директорию проекта.
- Выполните следующие команды:
npm run build npm start
- В браузере перейдите по ссылке: http://localhost:8080/PhoneBook-demo
- Результат должен быть таким как на изображении ниже.
Можете сверить результат освоения этого задания с файлами репозитория