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