Toolbar
Widget

A horizontal (or vertical) container for buttons and other widgets, typically docked to the top or bottom of a Panel. Items overflow gracefully into a menu when the toolbar is too narrow. Use the special string shortcuts '->' (spacer) and '|' (separator) to arrange items. Supports drag-drop reordering of items via enableReordering.

const toolbar = new Toolbar({
    items : {
        add    : { text : 'Add', icon : 'fa fa-plus' },
        remove : { text : 'Remove', icon : 'fa fa-minus' },
        spacer : '->',
        save   : { text : 'Save', icon : 'fa fa-check' }
    },
    appendTo : document.body
});

Useful configs and properties

Config	Description
items	Child widgets (buttons, fields, spacers, separators)
overflow	Overflow handling configuration
enableReordering	Allow drag-drop reordering of toolbar items

Arranging widgets

When passing an object (the approach we recommend for defining items), you can use -> as the property value to push widgets to the right side (in LTR):

items : {
    leftButton1  : { text : 'Left button 1', icon : 'fa fa-plus' },
    leftButton2  : { text : 'Left button 2', icon : 'fa fa-minus' },
    spacer       : '->',
    rightButton1 : { text : 'Right button 1', icon : 'fa fa-gear'}
}

When passing an array of items, you can similarly use the special -> item to push widgets to the right side:

items : [
    { text : 'Left button 1', icon : 'fa fa-plus' },
    { text : 'Left button 2', icon : 'fa fa-minus' },
    '->',
    { text : 'Right button 1', icon : 'fa fa-gear'}
]

Toolbar items can be drag-dropped

You can let users reorder the toolbar items by setting enableReordering to true.

This is not supported if you use weight to order the items.

Configs

Configs are options you supply in a configuration object when creating an instance of this class

enableReordering : Boolean

Set to true to allow users to reorder items in this toolbar using drag-drop

Has a corresponding runtime enableReordering property.
labelPosition : 'before'/'above'/'align-before'/'auto'/nullbefore

Toolbars override the default labelPosition for containers, placing labels before the input fields independent of which theme is used.

Has a corresponding runtime labelPosition property.
overflow : String/Object/null'menu'
How this Toolbar should deal with items that overflow its main axis.

Values may be:
- 'menu' A button with a menu is shown and the menu contains the overflowing items.
- 'scroll' The items overflow and mey be scrolled into view using the mouse or scroll buttons.
- null Disable overflow handling
When mode is 'menu', clones of overflowing toolbar item are created and added to a Menu. Any config changes to the original toolbar item are propagated to the menu's clone, so disabling a toolbar item will make the clone in the menu disabled.

The clone of an input field will propagate its value changes back to the original. The overflow button, its menu, and the clones should not be accessed or manipulated by application code.

Note that cloned items will be allocated a unique, generated ID because all IDs must be unique, so CSS targeting an element ID will not apply to a clone in the overflow menu.

Values may also be specified in object form containing the following properties:
- type : 'scroll'/'menu'
  
  'scroll' or 'menu'
- repeat : ClickRepeaterConfig
  
  A config object to reconfigure the ClickRepeater which controls auto repeat speed when holding down the scroll buttons when type is 'scroll'
- filter : Function
  
  A filter function which may return a falsy value to prevent toolbar items from being cloned into the overflow menu.
widgetCls : String

Custom CSS class to add to toolbar widgets

items : Object<String, ToolbarItems | Boolean | null>/ToolbarItems[]/Widget[]

An object containing typed child widget config objects or Widgets. Can also be specified as an array.

If configured as an Object, the property names are used as the child component's ref name, and the value is the child component's config object.

 new Toolbar({
     appendTo : document.body
     items    : {
         button : {
             type : 'button',
             onClick() { ... }
         }
     }
 })

Some special items can also be added:

-> Pushes following items to the other side
| Adds a vertical separator

 new Toolbar({
     appendTo : document.body
     items    : {
         button : {
             type : 'button',
             text : 'Click me',
             onClick() { ... }
         },
         separator : '|',
         name : {
             type : 'textfield',
             label : 'Enter name'
         },
         // Align following items to the end of the toolbar
         spacer : '->',
         saveButton : {
             type : 'button',
             text : 'Save',
             onClick() { ... }
         }
     }
 })

ignoreParentReadOnly : Booleantrue

Determines if the toolbars read-only state should be controlled by its parent.

When set to true, setting a parent container to read-only will not affect the widget. When set to false, it will affect the widget.

Properties

Properties are getters/setters or publicly accessible variables on this class

isToolbar : Booleantrue

READONLY

static

ADVANCED

Identifies an object as an instance of Toolbar class, or subclass thereof.

enableReordering : Boolean

Set to true to allow users to reorder items in this toolbar using drag-drop

Has a corresponding enableReordering config.
labelPosition : 'before'/'above'/'align-before'/'auto'/nullbefore

Toolbars override the default labelPosition for containers, placing labels before the input fields independent of which theme is used.

Has a corresponding labelPosition config.
isToolbar : Booleantrue

READONLY

ADVANCED

Identifies an object as an instance of Toolbar class, or subclass thereof.

Functions

Functions are methods available for calling on the class

getEvictionList( visibleItems )
: Array

private

static

Returns the Core.widget.Widget[] of items to hide to clear an overflow. The visibleItems array should be in order of the items in the container.

onDrop( )

private

Handle drop

Events

Events are triggered for certain actions in this class and can be listened for to react to those actions in your code

beforeItemDragStart

PREVENTABLE

This event is fired on the owning Toolbar prior to starting a drag gesture. The drag is canceled if a listener returns false.
itemDragStart

This event is fired when a drag gesture has started.
itemDrop

This event is fired when an item is dropped

Event handlers

Event handlers are callbacks called as a result of certain actions in this class

onBeforeItemDragStart

PREVENTABLE

This event is called on the owning Toolbar prior to starting a drag gesture. The drag is canceled if a listener returns false.
onItemDragStart

This event is called when a drag gesture has started.
onItemDrop

This event is called when an item is dropped

Type definitions

ToolbarItems : '|'/'->'/WidgetConfig
Toolbar items:
- '->' - push widgets to the right side
- '|' - add toolbar separator
- WidgetConfig - object with widget configuration

CSS variables

CSS variables that can be set to adjust appearance

Name	Description
--b-toolbar-background	Toolbar background
--b-toolbar-gap	Gap between toolbar items
--b-toolbar-justify-content	Content justification
--b-toolbar-padding	Toolbar padding
--b-toolbar-separator-color	Toolbar separator color ("\|" items)
--b-toolbar-separator-height	Toolbar separator height ("\|" items)

Toolbar
Widget

Useful configs and properties

Arranging widgets

Toolbar items can be drag-dropped

See also

Configs

Properties

Functions

Events

Event handlers

Type definitions

CSS variables

Source path

Inheritance tree4

Mixins6

Contents

Toolbar Widget

Useful configs and properties

Arranging widgets

Toolbar items can be drag-dropped

See also

Configs

Properties

Functions

Events

Event handlers

Type definitions

CSS variables

Source path

Inheritance tree4

Mixins6

Contents

Toolbar
Widget