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

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'}]
            }
        }]
    }
}