multiSelectComboBoxPicker 多选下拉框选择器

基本用法

当用户使用指针设备点击该控件时，会打开下拉列表。在控件获得焦点时，使用键盘的 ↑ 和 ↓ 键或输入字符也会打开下拉列表。

multi select combo box picker basics

multiSelectComboBoxPicker 控件中可以定义任意数量的操作，在组件右侧显示为按钮。操作可以通过 XML 中的 actions 内部元素定义，也可以在控制器中使用 addAction() 以编程方式添加。

<multiSelectComboBoxPicker id="multiSelectComboBoxPicker"
                           itemsEnum="com.company.onboarding.entity.DayOfWeek">
    <actions>
        <action id="clearAction" type="entity_clear"/>
    </actions>
</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 扩展了 Fetch plan，获取 Hobby 实例的列表，可用于选择。
3 Hobby 实体的 CollectionContainer。
4 数据加载协调器自动为组件提供可供选择的实例。
5 multiSelectComboBoxPicker 使用 hobbiesDc 作为选项容器显示 hobby 的列表。
6 添加预定义的操作清除所选内容。
7 添加预定义的操作打开查找视图。

组件的值包含所选的条目。当组件绑定集合属性时，Jmix 会将选定的条目转换为属性集合类型，例如 List 或 Set。

使用 MetaClass

multiSelectComboBoxPicker 也可以不与数据关联使用，即，不需要设置 dataContainer 或 property 属性。此时，可以使用 metaClass 属性指定 multiSelectComboBoxPicker 的实体类。itemsContainer 属性用于创建控件中的选项列表。

例如，组件可以直接处理 Hobby，那么需要设置 metaClass 为 Hobby：

<multiSelectComboBoxPicker metaClass="Hobby"
                           itemsContainer="hobbiesDc">
    <actions>
        <action id="clear" type="entity_clear"/>
    </actions>
</multiSelectComboBoxPicker>

基本功能

支持 comboBox 或 multiSelectComboBox 组件的常用功能：

验证

如需检查 multiSelectComboBoxPicker 组件输入的值，可以在内部元素 validators 中添加一个 validator元素。

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