PDA

View Full Version : Use panel as menu



pixman
16 Jul 2013, 4:26 AM
Hello,
I'm create a project based on the desktop exemple from the doc.

In this project, i'm using a panel as menu button on a toolbar.

This menu display correctly, but i have a problem with it. in the panel i have somes buttons, and the click event never fire !
the "menu panel" close on mousedown, and the click event not work.
can it's possible to change this behavior for menu close after the click event ( and not before )

My panel is used as menu in my button item declaration as this :



{
text : 'Menu',
menu : { xtype:'startmenu' }
},

Code of "startmenu" :


Ext.define('APP.view.desktop.StartMenu', { extend: 'Ext.panel.Panel',
alias: 'widget.startmenu',
height: 250,
width: 250,
layout: {
type: 'fit'
},
title: 'Username',
iconCls: 'bkoff-user16',
floating: true,
shadow: true,
defaultAlign: 'bl-tl',
ariaRole: 'menu',


initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'menu',
floating: false,
width: 120,
border : 0,
items: [
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
}
]
}
],
dockedItems: [
{
xtype: 'toolbar',
dock: 'right',
items: [
{
xtype: 'button',
id:'btnSelfAccountSettings',
iconCls : 'bkoff-wrench',
text: 'My account'
},
{
xtype: 'tbseparator'
},
{
xtype: 'button',
id:'btnSelfLogout',
iconCls : 'bkoff-key',
text: 'Logout',
handler: function(){ console.log('button handler',arguments); } // not fired !
}
]
}
]
});

Ext.menu.Manager.register(me); // If i comment this line, the menu not disapear, but event are fireds !
me.callParent(arguments);
}


});

pixman
16 Jul 2013, 5:10 AM
I answer to my thread.
after inspect the Ext.menu.Manager class, i have understand the importance of css class for the menu.

I have adding this in my panel properties, and now it's work fine !


cls: 'x-menu ux-start-menu',