3.5.2.2.3. 按钮面板

在线示例

API 文档

ButtonsPanel 是一个容器，它简化了表格上用于数据管理的组件(通常是按钮）的使用和排列。

该组件的 XML 名称：buttonsPanel

界面 XML 描述中定义 ButtonsPanel 的示例：

<table id="customersTable" dataContainer="customersDc" width="100%">
    <actions>
        <action id="create" type="create"/>
        <action id="edit" type="edit"/>
        <action id="remove" type="remove"/>
        <action id="excel" type="excel"/>
    </actions>
    <columns>
        <column id="name"/>
        <column id="email"/>
    </columns>
    <rowsCount/>
    <buttonsPanel id="buttonsPanel" alwaysVisible="true">
        <button id="createBtn" action="customersTable.create"/>
        <button id="editBtn" action="customersTable.edit"/>
        <button id="removeBtn" action="customersTable.remove"/>
        <button id="excelBtn" action="customersTable.excel"/>
    </buttonsPanel>
</table>

buttonsPanel 元素可以位于 table 内，也可以位于界面的其它任何位置。

如果 buttonsPanel 位于 table 中，则它会与表格的 rowsCount 组件组合，从而可以在垂直方向上节省空间。此外，如果使用 Frame.openLookup() 方法打开查找界面（例如，从 PickerField 组件），这时按钮面板会变为隐藏状态。

使用 Frame.openLookup() 打开查找界面时，可以利用 alwaysVisible 属性禁止隐藏按钮面板。如果属性值为 true，则不会隐藏按钮面板。默认情况下，属性值为 false。

默认情况下，buttonsPanel 中的按钮是水平的放置并带有换行。如果一行中没有足够的空间，放不下的按钮会被放置在下一行。

可以修改这个默认的行为，将 buttonsPanel 内的按钮显示在一行：

1. 创建 主题扩展 或者 自定义主题。

2. 定义 SCSS 变量 $cuba-buttonspanel-flow：

   $cuba-buttonspanel-flow: false

可以使用 LayoutClickListener 接口拦截对 buttonsPanel 区域的点击。

可以在 ButtonsPanel 中使用键盘快捷键。使用 addShortcutAction() 方法设置快捷方式和要执行的操作：

buttonsPanel.addShortcutAction(new ShortcutAction("SHIFT-A", shortcutTriggeredEvent ->
        notifications.create()
                .withCaption("SHIFT-A action")
                .show()
));

buttonsPanel 的属性

align - alwaysVisible - caption - captionAsHtml - contextHelpText - contextHelpTextHtmlEnabled - css - description - descriptionAsHtml - enable - box.expandRatio - height - id - stylename - visible - width

API

addLayoutClickListener - addShortcutAction - setSpacing