Выпадающий список

Строка-ссылка с выбором из выпадающего списка. Может используется для организации множественного выбора.

Пример
Исходный код

Документация API Спецификация Axure

Конфигурация

Контрол используется, если нужна строка-ссылка с выбором из выпадающего списка.

Конфигурация набора элементов описана здесь.

Для строки-ссылки можно определить следующие опции:

  • emptyText — к списку с заданным текстом добавляет пустой элемент.
  • displayProperty — название поля, значение которого отображается при выборе элемента из списка,
  • selectedKeys — массив значений ключевого поля выбранных записей списка,
  • contentTemplate — шаблон для отображения в строке выбранной записи.

Работа с одним ключом (опция selectedKey)

Адаптер Controls/source:SelectedKey позволяет контролу работать не с массивом selectedKeys, а с одним ключом selectedKey. Для корректной работы необходимо контрол обернуть в адаптер; значение selectedKey настраивается у адаптера.

Cобытие адаптера selectedKeyChanged позволяет обработать изменение выбранного ключа.

<!-- WML -->
<Controls.source:SelectedKey bind:selectedKey="_selectedKey">
   <Controls.dropdown:Input
      keyProperty="id"
      parentProperty="parent"
      nodeProperty="@parent"
      source="{{_createMemory(_hierarchySource)}}"/>
</Controls.source:SelectedKey>
// JavaScript
_beforeMount: function() {
   this._selectedKey = 25;
}

Выпадающий список с множественным выбором

Для создания выпадающего списка с множественным выбором используется Controls/dropdown:Input.
Множественный выбор включается опцией multiSelect.

<!-- WML -->
<Controls.dropdown:Input
    bind:selectedKeys="_selectedKeys"
    keyProperty="id"
    displayProperty="title"
    source="{{_source}}"
    multiSelect="{{true}}">
</Controls.dropdown:Input>
// JavaScript
_source: null,
_selectedKeys: null,
_beforeMount: function(options) {
    this._source = new source.Memory({
        keyProperty: 'id',
        data: [
            {id: 1, title: 'Ярославль'},
            {id: 2, title: 'Москва'},
            {id: 3, title: 'Санкт-Петербург'},
            {id: 4, title: 'Адыгея Респ.'},
            ...
        ]
    });
    this._selectedKeys = [1, 2, 3];
}

Закрытие всплывающего списка

Всплывающий список Controls/dropdown:Input можно закрыть событием close, которое вызывается компонентом, находящимся внутри nodeFooterTemplate.

В обработчике клика по элементу следует вызвать:

// JavaScript
this._notify('close', [], {bubling: true})