Базовая конфигурация

В статье рассмотрен пример базовой настройки панели действий с указанием минимального числа опций.

Добавьте на страницу списочный контрол:

<!-- 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}}">

Добавьте кнопки на панель действий. Для этого на ней задайте настройку источника данных для операций в опции 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 {
    ...
}