Question

我有一个工具栏按钮，点击后会显示一个菜单，我希望它是自动的。鼠标悬停时的下拉菜单。我通过以下代码完成了这个：

xtype : 'button',
                text : 'My Button',
                listeners : {
                    mouseover : function() {
                        console.log('inside mouse over');
                        this.showMenu();
                    },
                    menushow : function() {
                        console.log('menu shown');
                        this.mouseLeaveMonitor = this.menu.el
                                .monitorMouseLeave(100, this.hideMenu, this);
                    },
                    destroy : function(combo) {
                        combo.menu.el.un(combo.mouseLeaveMonitor);
                    }
                },
                menu : [{
                            text : 'menu item1'
                        }, {
                            text : 'menu item2', menu : [{text : 'text 1'}, {text : 'text 2'}]
                        }]

嗯，我的代码适用于下拉菜单，但在子菜单中失败。任何人都可以帮忙吗？

Answer 1

您只能使用此功能

xtype : 'button',
text : 'My Button',
listeners : {
    mouseover : function() {
        console.log('inside mouse over');
        this.showMenu();
    }
},
menu : [{
    text : 'menu item1'
}, {
    text : 'menu item2', menu : [{text : 'text 1'}, {text : 'text 2'}]
}]

Answer 2

我认为这个人试图完成与你相同的事情：ExtJS 4.1 "HoverButton" extension issue

您需要添加的区别是将您的菜单配置为对象配置，而不是项目数组：

{
    xtype: 'hoverButton',
    text : 'My Button',
    menu : {
        items: [{
            text : 'menu item1'
        }, {
            text : 'menu item2',
            menu : {
                items: [{text : 'text 1'}, {text : 'text 2'}]
            }
        }]
    }
}

工具栏菜单自动下拉鼠标悬停在extjs 4中

2 个答案: