MenuItem

If configured with a Boolean value, a checkbox is displayed as the start icon, and the toggle event is fired when the checked state changes. String value allows to link value by reference name.

Example:

menu : {
    items : {
        fill : {
            text    : 'Fill width',
            checked : 'up.resourceColumns.fillWidth'
        },
        fit : {
            text        : 'Fit width',
            checked     : false,
            closeParent : true
        }
    }
}

By default, upon activate, non-checkbox menu items will collapse the owning menu hierarchy.

Configure this as false to cause the menu to persist after activating an item

If provided, turns the menu item into a link

Item icon class.

All Font Awesome icons may also be specified as 'fa-' + iconName.

Otherwise this is a developer-defined CSS class string which results in the desired icon.

A submenu configuration object, or an array of MenuItem configuration objects from which to create a submenu.

Configuration object example:

new Menu({
    // Menu items
    items : {
        move : {
            text : 'Main item',
            menu : {
                // Submenu items
                firstItem : {
                    text : 'Sub-item 1',
                    onItem({ eventRecord }) {}
                },
                secondItem : {
                    text : 'Sub-item 2',
                    onItem({ eventRecord }) {}
                }
            }
        }
    }
});

Array of items example:

new Menu({
    // Menu items
    items : {
        move : {
            text : 'Main item',
            // Submenu items
            menu : [
                {
                    text : 'Sub-item 1',
                    onItem({ eventRecord }) {}
                },
                {
                    text : 'Sub-item 2',
                    onItem({ eventRecord }) {}
                }
            ]
        }
    }
});

Note that this does not have to be a Menu. The type config can be used to specify any widget as the submenu.

new Menu({
    // Menu items
    items : {
        move : {
            text : 'Main item',
            // Submenu items
            menu : [
                {
                    type  : 'textfield',
                    label : 'Type here'
                },
                {
                    type : 'button',
                    text : 'Confirm'
                }
            ]
        }
    }
});

Set to true to display a border above this menu item, if there are other visible menu items before it.

The target attribute for the href config

The text to be displayed in the item. The text is automatically HTML encoded.

Indicates that this menu item is part of a group where only one can be checked. Assigning a value also sets toggleable to true.

const yesButton = new Button({
   toggleGroup : 'yesno',
   text        : 'Yes'
});

const noButton = new Button({
   toggleGroup : 'yesno',
   text        : 'No'
});

Get/sets the checked state of this MenuItem and fires the toggle event upon change.

Note that this must be configured as a Boolean to enable the checkbox UI.

Returns the instantiated menu widget as configured by menu.

The text to be displayed in the item. The text is automatically HTML encoded.

Indicates that this menu item is part of a group where only one can be checked. Assigning a value also sets toggleable to true.

const yesButton = new Button({
   toggleGroup : 'yesno',
   text        : 'Yes'
});

const noButton = new Button({
   toggleGroup : 'yesno',
   text        : 'No'
});

Actions this item. Fires the item event, and if this is a checked item, toggles the checked state, firing the toggle event.