3.5.2.2.3. 按钮面板

在线示例

API 文档

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

gui buttonsPanel

该组件的 XML 名称:buttonsPanel

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

  1. <table id="customersTable" dataContainer="customersDc" width="100%">
  2. <actions>
  3. <action id="create" type="create"/>
  4. <action id="edit" type="edit"/>
  5. <action id="remove" type="remove"/>
  6. <action id="excel" type="excel"/>
  7. </actions>
  8. <columns>
  9. <column id="name"/>
  10. <column id="email"/>
  11. </columns>
  12. <rowsCount/>
  13. <buttonsPanel id="buttonsPanel" alwaysVisible="true">
  14. <button id="createBtn" action="customersTable.create"/>
  15. <button id="editBtn" action="customersTable.edit"/>
  16. <button id="removeBtn" action="customersTable.remove"/>
  17. <button id="excelBtn" action="customersTable.excel"/>
  18. </buttonsPanel>
  19. </table>

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

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

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

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

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

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

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

    1. $cuba-buttonspanel-flow: false

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

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

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

buttonsPanel 的属性

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

API

addLayoutClickListener - addShortcutAction - setSpacing