Toolbar

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() { ... }
         }
     }
 })

Custom CSS class to add to toolbar widgets

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.

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

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

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:

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

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