javascript - 鼠标悬停、鼠标悬停和下拉菜单的 Ext 4 问题

Question

问题如下：我有一个菜单，我希望它在鼠标经过时隐藏和显示元素，我通过 mouseover 和 mouseout 事件得到它，但问题是我实际上无法选择下拉菜单因为它消失了，我想这可能是因为 dom 的问题，但我不太确定，感谢任何帮助！代码如下：

var PanelMuestra = Ext.extend(Ext.Panel, {
    width    : 850 ,
    height   : 250,
    style    : 'margin-top:15px',
    bodyStyle: 'padding:10px',
    renderTo : Ext.getBody(),
    html     : fakeHTML,
    autoScroll: true
});
new PanelMuestra({
    title: 'Menu',
    tbar: [{
        xtype:'splitbutton',
        text: 'Nuevo aca',
        listeners : {
            mouseover : function() {
                console.log('Dentro del area');
                this.showMenu();
            },
            mouseout: function (b) {
                console.log('Fuera del area');
                b.hideMenu();
                //Ext.menu.Manager.hideAll();
            }


        },
        menu: [{text: 'Ejemplo boton 1'}]
    },'-',{
        xtype:'splitbutton',
        text: 'Relleno',
        menu: [{text: 'Cut Menu Item'}]
    },'-',{
        text: 'Relleno'
    },'-',{
        text: 'Relleno',
        menu: [{

            text: 'Cut Menu Item'

        }]
    },'-',{
        text: 'Relleno'
    }]
});

Answer 1

您不应该使用自定义事件显示和隐藏您的菜单。ExtJS 4 原生支持下拉菜单。

这是一个带有下拉菜单的按钮的简单示例

Ext.define('Mb.view.TestMenu', {
    extend: 'Ext.button.Button',
    xtype: 'winbiz-menu',
    text: 'Test Menu',
    icon: Paths.img + 'page_white_winbiz.png',
    menu: {
        items: [{
            text: 'Export,
            itemId: 'export'
        },{
            text: Lang._('Test')
            itemId: 'test'
        }]
    }
});