Настройка отображения опций записи

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

Шаг 1: Импорт зависимостей

  1. Перейдите в директорию PhoneBook и откройте файл PhoneBook.ts.
  2. Импортируйте следующие контрол:
import { IItemAction } from 'Controls/itemActions';

Шаг 2: Настройка отображения опций записи

Расположите его после описания события нажатия. Подробнее о каждом свойстве читайте здесь. 2. В свойстве _itemActions опишите конфигурацию для опции удаления записи:

// TypeScript
protected _itemActions: IItemAction[] = [{
    id: 'delete',
    title: 'Удалить',
    icon: 'icon-Erase icon-error',
    iconStyle: 'danger'
}];

Шаг 3: Конфигурация опций записи в таблице

Добавьте для таблицы настройку опций записи.

<!-- WML -->
<Controls.grid:View
   name="gridView"
   columns="{{ _columns }}"
   itemActions="{{ _itemActions }}"
   itemActionsPosition="outside"
   keyProperty="key"
   source="{{ _source }}" />
  • В опции itemActions передаем конфигурацию опций записи.
  • Ориентацию набора операций над записью относительно строки можно изменить опцией itemActionsPosition — значением outside, т.е. кнопки опций записи будут отображены под строкой.

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

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

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

Что дальше?

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