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