Ext 4问题有mouseover,mouseout和下拉菜单

时间:2013-10-30 14:13:04

标签: javascript html extjs mouseover mouseout

问题如下: 我有一个菜单,我希望它隐藏并显示鼠标经过时的元素,我用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'
    }]
});

1 个答案:

答案 0 :(得分:0)

您不应使用自定义事件显示和隐藏菜单。 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'
        }]
    }
});