Menu

Widget

A popup menu that displays a list of items which the user can activate using mouse or keyboard. Menu items can be plain actions, checkable toggles, or nested submenus (via menu). Menus are typically shown on right-click or attached to a Button via its menu config. The item event fires when any item is activated, and toggle fires when a checkable item changes state.

A common usecase is to attach a menu to a Button, which is supported via the menu config.

Useful configs and events

See also

• MenuItem - Individual menu item widget
• Button - Button with built-in menu support
• Popup - Base floating popup class

Menu item interaction handling in a complex widget

In the case of a menu which is part of a complex UI within a larger Bryntum widget, use of the string form for handlers is advised. A handler which starts with 'up.' will be resolved by looking in owning widgets of the Menu. For example a Calendar may have handlers for its MenuItems configured in:

new Calendar({
    appendTo : document.body,
    project  : myProjectConfig,
    tbar  : {
        items : {
            settings : {
                type : 'button',
                text : 'Settings',

                // High weight so it goes at the end
                weight : 800,
                menu   : [{
                    text     : 'Hide non-working days',
                    checked  : false,

                     // The Menu's ownership will be traversed to find this function name.
                    onToggle : 'up.toggleHideNonWorkingDays'
                }, {
                    text    : 'Clear changes',

                     // The Menu's ownership will be traversed to find this function name.
                    onItem : 'up.clearUncommittedChanges'
                }]
            }
        }
    },

    // Menu handlers found here
    toggleHideNonWorkingDays({ checked }) {
        // Use Calendar API which creates event in the selected date
        this.hideNonWorkingDays = checked;
    },

    clearUncommittedChanges() {
        // Clear changes to our event store which are not yet synced to the server
        this.eventStore.revertChanges();
    }
});

let menu = new Menu({
    forElement : btn.element,
    items      : [
        {
            icon : 'b-icon b-icon-add',
            text : 'Add'
        },
        {
            icon : 'b-icon b-icon-trash',
            text : 'Remove'
        },
        {
            icon     : 'b-icon b-icon-lock',
            disabled : true,
            text     : 'I am disabled'
        },
        {
            text : 'Sub menu',
            menu : [{
                icon : 'fa fa-play',
                text : 'Play'
            }]
        }
    ],
    // Method is called for all ancestor levels
    onItem({ item }) {
        Toast.show('You clicked ' + item.text);
    }
});