multiSelectComboBoxPicker 多选下拉框选择器
multiSelectComboBoxPicker 支持用户从下拉列表或通过操作选择一个或多个条目。该组件支持 multiSelectComboBox 的所有功能。
XML 元素 |
|
|---|---|
Java 类 |
|
XML 属性 |
id - alignSelf - allowCustomValue - allowedCharPattern - ariaLabel - ariaLabelledBy - autoExpand - autoOpen - autofocus - classNames - clearButtonVisible - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - itemsContainer - itemsEnum - label - maxHeight - maxWidth - metaClass - minHeight - minWidth - opened - overlayClass - pageSize - placeholder - property - readOnly - required - requiredMessage - selectedItemsOnTop - tabIndex - themeNames - title - visible - width |
事件和处理器 |
AttachEvent - BlurEvent - ClientValidatedEvent - ComponentValueChangeEvent - CustomValueSetEvent - DetachEvent - FocusEvent - TypedValueChangeEvent - itemLabelGenerator - itemsFetchCallback - renderer - validator |
XML 内部元素 |
actions - itemsQuery - tooltip - validators |
基本用法
当用户使用指针设备点击该控件时，会打开下拉列表。在控件获得焦点时，使用键盘的 ↑ 和 ↓ 键或输入字符也会打开下拉列表。
multiSelectComboBoxPicker 控件中可以定义任意数量的操作，在组件右侧显示为按钮。操作可以通过 XML 中的 actions 内部元素定义，也可以在控制器中使用 addAction() 以编程方式添加。
<multiSelectComboBoxPicker id="multiSelectComboBoxPicker"
itemsEnum="com.company.onboarding.entity.DayOfWeek">
<actions>
<action id="clearAction" type="entity_clear"/>
</actions>
</multiSelectComboBoxPicker>数据绑定
如需创建关联数据的 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 | 添加预定义的操作打开查找视图。 |
组件的值返回选择条目的列表。
使用 MetaClass
multiSelectComboBoxPicker 也可以不与数据关联使用，即，不需要设置 dataContainer 或 property 属性。此时，可以使用 metaClass 属性指定 multiSelectComboBoxPicker 的实体类。itemsContainer 属性用于创建控件中的选项列表。
例如，组件可以直接处理 Hobby，那么需要设置 metaClass 为 Hobby：
<multiSelectComboBoxPicker metaClass="Hobby"
itemsContainer="hobbiesDc">
<actions>
<action id="clear" type="entity_clear"/>
</actions>
</multiSelectComboBoxPicker>