multiSelectComboBoxPicker

multiSelectComboBoxPicker позволяет пользователям выбирать несколько элементов из раскрывающегося списка или с помощью действий выбора.

XML-элемент

multiSelectComboBoxPicker

Java-класс

JmixMultiSelectComboBoxPicker

Основы

ДЕМО

Выпадающий список открывается при нажатии на поле указателем. Если поле находится в фокусе, список также открывается клавишами Up и Down или при вводе символа.

Для multiSelectComboBoxPicker можно определить произвольное количество действий, отображаемых в виде кнопок справа. Это можно сделать либо в XML-дескрипторе, используя вложенный элемент actions, либо программно в контроллере, используя метод addAction().

<multiSelectComboBoxPicker placeholder="Choose a customers" itemsContainer="customersDc"
                           metaClass="Customer"
                           width="20em">
    <actions>
        <action id="entity_lookup" type="entity_lookup"/>
        <action id="entity_clear" type="entity_clear"/>
    </actions>
</multiSelectComboBoxPicker>

multiSelectComboBoxPicker связанный с данными

Привязка данных - это процесс связывания визуального компонента с контейнером данных. Изменения в визуальном компоненте или в соответствующем контейнере данных могут вызывать обновления друг в друге. Подробности смотрите в разделе Использование компонентов данных.

Как и multiSelectComboBox, компонент multiSelectComboBoxPicker предназначен для свойств, хранящих несколько значений, например List или Set. Обычные структуры данных и сценарии использования смотрите в разделе Привязка данных.

Чтобы создать multiSelectComboBoxPicker, подключенный к данным, используйте атрибуты dataContainer и property. Атрибут itemsContainer используется для предоставления списка доступных элементов. Следующий пример создаёт компонент multiSelectComboBoxPicker, работающий с данными.

<data>
    <instance id="userDc" class="com.company.onboarding.entity.User"> (1)
        <fetchPlan extends="_base"> (2)
            <property name="hobbies" fetchPlan="_base"/>
        </fetchPlan>
        <loader id="userDl"/>
    </instance>
    <collection id="hobbiesDc" class="com.company.onboarding.entity.Hobby"> (3)
        <loader id="hobbiesDl" readOnly="true">
            <query>
                <![CDATA[select e from Hobby e]]>
            </query>
        </loader>
        <fetchPlan extends="_base"/>
    </collection>
</data>
<facets>
    <dataLoadCoordinator auto="true"/> (4)
</facets>
<layout>
    <multiSelectComboBoxPicker id="hobbiesPicker"
                               dataContainer="userDc"
                               property="hobbies"
                               itemsContainer="hobbiesDc"> (5)
        <actions>
            <action id="entityClear" type="entity_clear"/> (6)
            <action id="entityLookup" type="entity_lookup"/> (7)
        </actions>
    </multiSelectComboBoxPicker>
</layout>
1 Контейнер данных для хранения экземпляра User, который в данный момент редактируется.
2 Фетч-план расширен для извлечения коллекции экземпляров Hobby, которые будут доступны для выбора.
3 CollectionContainer для сущности Hobby.
4 Координатор загрузки данных для автоматического предоставления компоненту экземпляров для выбора.
5 multiSelectComboBoxPicker получает hobbiesDc в качестве контейнера элементов, чтобы отобразить список хобби в выпадающем списке.
6 Добавление предопределённого действия для очистки выбора.
7 Добавление предопределённого действия для открытия экрана поиска.

Значение компонента содержит выбранные элементы. Когда компонент привязан к свойству-коллекции, Jmix преобразует выбранные элементы к типу коллекции свойства, например, List или Set.

Использование MetaClass

ДЕМО

Вы можете использовать multiSelectComboBoxPicker без прямой ссылки на данные, то есть вам не нужно указывать атрибуты dataContainer или property. В этом случае используйте атрибут metaClass, чтобы указать тип сущности для multiSelectComboBoxPicker. Чтобы указать коллекцию экземпляров для выбора, используйте атрибут itemsContainer.

Например, компонент может работать с сущностью Hobby, которая имеет имя класса метаданных Hobby.

<multiSelectComboBoxPicker placeholder="Choose a customers" itemsContainer="customersDc"
                           metaClass="Customer"
                           width="20em">
    <actions>
        <action id="entity_lookup" type="entity_lookup"/>
        <action id="entity_clear" type="entity_clear"/>
    </actions>
</multiSelectComboBoxPicker>

Основные возможности

Поддерживаются следующие возможности, общие для компонентов comboBox или multiSelectComboBox:

Валидация

Чтобы проверить значения, введённые в компонент multiSelectComboBoxPicker, вы можете использовать валидатор во вложенном элементе validators.

Для multiSelectComboBoxPicker доступны следующие предопределённые валидаторы:

XML-элемент

validators

Предопределённые валидаторы

custom - notEmpty - notNull - size

Варианты темы

Используйте атрибут themeNames, чтобы применить один или несколько вариантов темы.

Вариант Описание Поддерживается в

align-left

Выравнивает значение поля по левому краю.

Aura, Lumo

align-center

Выравнивает значение поля по центру.

Aura, Lumo

align-right

Выравнивает значение поля по правому краю.

Aura, Lumo

align-start

Выравнивает значение поля по начальной стороне с учетом текущего направления текста.

Aura

align-end

Выравнивает значение поля по конечной стороне с учетом текущего направления текста.

Aura

helper-above-field

Размещает вспомогательный текст над полем, под меткой.

Aura, Lumo

small

Уменьшает размер компонента.

Aura, Lumo

Атрибуты

multiSelectComboBoxPicker имеет следующие уникальные атрибуты:

Имя Описание По умолчанию

allowCustomValue

Определяет, могут ли пользователи вводить значения, отсутствующие среди доступных элементов.

—

autoExpand

Определяет, будут ли выбранные значения автоматически расширяться, когда поле получает фокус.

—

autoOpen

Определяет, открывается ли всплывающий список элементов при получении полем фокуса.

—

clearButtonVisible

Определяет, отображается ли в поле кнопка очистки.

false

itemsContainer

Задаёт контейнер элементов.

—

itemsEnum

Задаёт перечисление элементов.

—

metaClass

Задаёт метакласс.

—

opened

Определяет, открыто ли наложение элемента.

—

pageSize

Задаёт размер страницы.

—

selectedItemsOnTop

Устанавливает выбранные элементы сверху.

—

multiSelectComboBoxPicker имеет следующие общие атрибуты:

id - alignSelf - allowedCharPattern - ariaLabel - ariaLabelledBy - autofocus - classNames - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - label - maxHeight - maxWidth - minHeight - minWidth - placeholder - property - readOnly - required - requiredMessage - tabIndex - themeNames - title - visible - width

Обработчики

multiSelectComboBoxPicker имеет следующие уникальные обработчики:

Имя Описание

CustomValueSetEvent

Возникает, когда пользователь вводит в поле пользовательское значение.

itemLabelGenerator

Предоставляет текст, отображаемый для каждого элемента.

itemsFetchCallback

Загружает элементы по запросу фильтрации и параметрам постраничного вывода.

renderer

Предоставляет компонент для отображения каждого элемента.

validator

Проверяет значение компонента.

multiSelectComboBoxPicker имеет следующие общие обработчики:

AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - TypedValueChangeEvent

Элементы

Компонент multiSelectComboBoxPicker может содержать следующие вложенные элементы: actions, fragmentRenderer, itemsQuery, tooltip, и validators.