对于工具栏中具有菜单的按钮,当单击任何一个按钮时,所有按钮上的鼠标悬停时都会显示菜单Ext JS 6.5.3

时间:2018-10-30 12:34:19

标签: extjs6.5

只需在sencha小提琴链接menu button in toolbar fiddle

中复制并运行以下代码

当我在工具栏上有多个菜单按钮并单击任意一个按钮时,所有按钮上的其他按钮就会显示在菜单上。我希望菜单仅在单击时显示,而不在按钮焦点或悬停时显示。

Ext.application({

name: 'Fiddle',

launch: function() {
    Ext.create({
        xtype: 'toolbar',
        renderTo: Ext.getBody(),
        layout: 'vbox',
        padding: 20,
        containsFocus : false,
        defaults: {
            xtype: 'button',
            margin: '0 0 12 0'
        },

        items: [{
            xtype: 'splitbutton',
            text: 'Split Button',
            // click the "Split Button" text to have the click handled
            // by the configured 'handler' function
            handler: function () {
                Ext.Msg.alert('Split Button', 'Button body clicked');
            },
            // clicking on the menu arrow will show the split button menu
            menu: {
                plain: true,
                items: [{
                    text: 'Split Menu Item #1'
                }, {
                    text: 'Split Menu Item #2'
                }],
                listeners: {
                    click: function (menu, item) {
                        Ext.Msg.alert('Menu Button', item.text);
                    }
                }
            }
        } ,{

            // clicking anywhere on the button will show its configured menu
            text: 'Button with Menu',
            menu: {
                plain: true,
                items: [{
                    text: 'Menu Item #1'
                }, {
                    text: 'Menu Item #2'
                }],
                // the click event handler for all menu items
                listeners: {
                    click: function (menu, item) {
                        Ext.Msg.alert('Menu Button', item.text);
                    }
                }
            }

        }]
    });
}

});

0 个答案:

没有答案