PDA

View Full Version : retrieve a "Menu"



ahsec
22 May 2012, 4:08 AM
Hey...

I've created a menu item.....I've been trying to get it using


Ext.getCmp(id of menu);

but it doesn't seem to get it as I get "undefined"

how do I get the menu item ?

Thanks

MaximusDecimus
22 May 2012, 4:59 AM
Can you show the code of the menu?

ahsec
22 May 2012, 5:07 AM
{ xtype: 'menu',
floating: false,
id: 'a_menu',
itemId: 'a_menu',
width: 120,
items: [
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
},
{
xtype: 'menuitem',
text: 'Menu Item'
}
]
}

how do I apply show() on it...I can't get the object

MaximusDecimus
22 May 2012, 5:15 AM
I think you first need to add the menu to a component. For example a Button or a toolbar.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.toolbar.Toolbar

Then use the 'menu' config

ahsec
22 May 2012, 5:20 AM
It is currently contained inside a Grid Panel...

I want it to open when a right click is clicked on a row....

is it ok?


thanks for you help anyway :-)

MaximusDecimus
22 May 2012, 5:25 AM
Try to use viewConfig config of the grid:


viewConfig: {
listeners: {
contextmenu: function(view, index, node, e){
...your menu code...
}
}

ahsec
22 May 2012, 5:51 AM
Ext.getCmp('a_alertsTable').addListener(
'itemcontextmenu',
function(that,record,index,eOPts){
Ext.getCmp('a_menu').show();
}



where the alertsTable is the Panel in which the Menu is....

I don't get it...
it says show() cannot be called on undefined

If I put it inside a tool bar it doesn't open where I want it to ...
which is on the row that was clicked

MaximusDecimus
22 May 2012, 6:13 AM
This works for me:



myMenu = Ext.create('Ext.menu.Menu', {
width: 100,
height: 100,
margin: '0 0 10 0',
floating: false, // usually you want this set to True (default)
items: [{
text: 'regular item 1'
},{
text: 'regular item 2'
},{
text: 'regular item 3'
}]
});




{
xtype : 'grid',
store : me.store,
viewConfig : {
listeners: {
itemcontextmenu: function(view, index, node, e){
myMenu.show();
}
}
}
};

ahsec
22 May 2012, 6:19 AM
It worked....
However....I still don't get why the browser's right click menu appears too!!

does it in your browser too?

Using Chrome here

MaximusDecimus
22 May 2012, 6:20 AM
Yes.. obviously that is not what you want..

sword-it
22 May 2012, 6:28 AM
Hi,
I think you want to show the context menu in the row of grid.
You should use 'itemcontextmenu' event of grid. The code is following:


{
xtype: 'grid'
, store: new Ext.data.JsonStore({
fields:['name', 'email', 'phone'],
data: {
items: [
{ 'name': 'Lisa', "email":"lisa@simpsons.com"},
{ 'name': 'Marge', "email":"marge@simpsons.com"}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
})
, columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', width: 200}
]
, listeners: {
itemcontextmenu: function(view, record, item, index, event, eOpts){
var menu = new Ext.menu.Menu({
width: 120
, items: [
{
xtype: 'menuitem',
text: 'Add New'
},
{
xtype: 'menuitem',
text: 'Edit'
},
{
xtype: 'menuitem',
text: 'Delete'
}
]
});
menu.showAt(event.xy);
}
}
}

sword-it
22 May 2012, 6:33 AM
Hi,
If you not want to see the browsers context menu, then you just need to add one attribute to the body tag of your html/aspx page. Like following:



<body oncontextmenu="return false;">

</body>