鼠标悬停、鼠标悬停和下拉菜单的 Ext 4 问题答案

【问题标题】：Ext 4 Issue with mouseover, mouseout and drop down menu鼠标悬停、鼠标悬停和下拉菜单的 Ext 4 问题
【发布时间】：2013-10-30 14:13:03
【问题描述】：

问题如下：我有一个菜单，我希望它在鼠标经过时隐藏和显示元素，我通过 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'
    }]
});

【问题讨论】：

标签： javascript html extjs mouseover mouseout

【解决方案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'
        }]
    }
});

【讨论】：