PDA

View Full Version : mouse right click on grid row display menu



javapurna
12 Jun 2013, 10:17 PM
hi every one ,

i have a requirement to display menu on grid row right click on mouse.

i am providing screenshot .(like tine20)44337

adanali
13 Jun 2013, 12:20 AM
Ext.define('MyApp.view.MyGrid', {
extend : 'Ext.grid.Panel',
...
listeners : {
itemcontextmenu : function(record, item, index, e, eOpts){
var xy = eOpts.getXY();
Ext.widget('yourDefinedMenu').showAt(xy)
},
},
...
});

evant
13 Jun 2013, 12:29 AM
The above answer isn't optimal because it means creating a new menu instance every time. You should cache the menu and only create it if it doesn't exist.

adanali
13 Jun 2013, 1:08 AM
The above answer isn't optimal because it means creating a new menu instance every time. You should cache the menu and only create it if it doesn't exist.

You can change it easily;



Ext.define('MyApp.view.MyGrid', {
extend : 'Ext.grid.Panel',
...
listeners : {
itemcontextmenu : function(record, item, index, e, eOpts){
var xy = eOpts.getXY();
new Ext.menu.Menu({
items : [{
text : 'Add'
}, {
text : 'Add'
}]
}).showAt(xy)
},
},
...
});

javapurna
13 Jun 2013, 1:53 AM
thank you for replaying every one.
one more is how to get current record (row ) on click of Add button.
can i use Listener to get store or record .
if suppose context menu having tow items 1) UPDATE
2) DELETE IF i am click on update get current row (record id or record)

evant
13 Jun 2013, 2:02 AM
@adanali

That's still exactly the same thing.



Ext.define('Foo', {
extend: 'Ext.grid.Panel',

initComponent: function(){
this.callParent();
this.on('itemcontextmenu', this.showMenu, this);
},

showMenu: function(record, item, index, e) {
if (!this.menu) {
this.menu = new Ext.menu.Menu();
}
this.menu.showAt(e.getXY());
},

onDestroy: function(){
Ext.destroy(this.menu);
this.callParent();
}
});

javapurna
13 Jun 2013, 3:01 AM
thanks for replaying evant.

it is working fine . but it is also display browser menu and behind that display contextmenu.
i am providing screenshot . 44343







behind the browser menu contextmenu displaying .how to stop this menu

adanali
13 Jun 2013, 3:08 AM
I fixed that problem like that:

In my index.html file



<html>
<head>
...
</head>
<body oncontextmenu="return false;"></body>
</html>

adanali
13 Jun 2013, 3:14 AM
@adanali

That's still exactly the same thing.



Ext.define('Foo', {
extend: 'Ext.grid.Panel',

initComponent: function(){
this.callParent();
this.on('itemcontextmenu', this.showMenu, this);
},

showMenu: function(record, item, index, e) {
if (!this.menu) {
this.menu = new Ext.menu.Menu();
}
this.menu.showAt(e.getXY());
},

onDestroy: function(){
Ext.destroy(this.menu);
this.callParent();
}
});


i accept i am new but what is difference your code from mine?

evant
13 Jun 2013, 3:42 AM
As I said above, your code creates a new menu instance every time you right click. Click 10 times, you create 10 menus (DOM included). You don't need to and it will leak memory.

@javapurna

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.EventObject-method-stopEvent

adanali
13 Jun 2013, 4:09 AM
As I said above, your code creates a new menu instance every time you right click. Click 10 times, you create 10 menus (DOM included). You don't need to and it will leak memory.

@javapurna

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.EventObject-method-stopEvent

OK, i got it, thanks.

javapurna
13 Jun 2013, 8:27 PM
thank you very much evant ,adanali (http://www.sencha.com/forum/member.php?572950-adanali)