Базовая конфигурация
В статье рассмотрен пример базовой настройки панели действий с указанием минимального числа опций.
Добавьте на страницу списочный контрол:
<!-- WML -->
<Controls.list:View/>
Оберните списочный контрол в контейнер Controls/list:Container:
<!-- WML -->
<Controls.list:Container>
<Controls.list:View/>
</Controls.list:Container>
Добавьте на страницу контрол Controls/operations:Panel:
<!-- WML -->
<Controls.operations:Panel/>
...
Оберните контрол Controls/operations:Panel в контейнер Controls/operations:PanelContainer:
<!-- WML -->
<Controls.operations:PanelContainer>
<Controls.operations:Panel/>
</Controls.operations:PanelContainer>
...
Оберните содержимое страницы в Controls/browser:Browser. Он используется для организации связи панели действий со списком.
<!-- WML -->
<Controls.browser:Browser>
<div>
<Controls.operations:PanelContainer>
<Controls.operations:Panel/>
</Controls.operations:PanelContainer>
<Controls.list:Container>
<Controls.list:View/>
</Controls.list:Container>
</div>
</Controls.browser:Browser>
На уровне браузера задайте конфигурацию источника данных для списка в опции source.
<!-- WML -->
<Controls.browser:Browser source="{{_source}}">
Примечание
Списочный метод нужно перевести на использование ListIterator. Это требуется для корректной работы с отмеченными записями. Подробнее о его использовании вы можете прочитать здесь.
Добавьте кнопки на панель действий. Для этого на ней задайте настройку источника данных для операций в опции source.
<!-- WML -->
<Controls.operations:Panel source="{{_panelSource}}"/>
this._panelSource = new Memory({
keyProperty: 'id',
data: [
{
id: 'sum',
icon: 'icon-Sum',
title: 'Суммировать',
},
{
id: 'export',
icon: 'icon-Save',
title: 'Выгрузить',
}
]
});
Свяжите опции selectedKeys и excludedKeys с состоянием контрола. Эта настройка обеспечит корректную работу функционала отметки чекбоксами в списке.
<!-- WML -->
<Controls.browser:Browser source="{{_source}}"
bind:selectedKeys="_selectedKeys"
bind:excludedKeys="_excludedKeys">
<div>
<Controls.operations:PanelContainer>
<Controls.operations:Panel source="{{_panelSource}}"/>
</Controls.operations:PanelContainer>
<Controls.list:Container>
<Controls.list:View/>
</Controls.list:Container>
</div>
</Controls.browser:Browser>
// TypeScript
import {SbisService, Memory} from 'Types/source';
...
protected _selectedKeys: null;
protected _excludedKeys: null;
Добавьте обработчик события клика по кнопке, расположенной на панели действий.
<!-- WML -->
<Controls.operations:Panel source="{{_panelSource}}" on:itemClick="_itemClick()"/>
// TypeScript
protected _itemClick(event: Event, id: string): void {
...
}