PDA

View Full Version : How to get the mouse position?



Elfayer
13 Jul 2012, 5:35 AM
Hi,

I would like to open a context menu at the mouse position.


panel.getEl().on('contextmenu', function (e) {
e.preventDefault();
contextMenu.showAt(/*mousePosition*/);
});

friend
13 Jul 2012, 10:32 AM
panel.getEl().on('contextmenu', function (e) {
e.preventDefault();
var coordinatesArray = e.getXY();
contextMenu.showAt(coordinatesArray[0], coordinatesArray[1]);
});

Elfayer
15 Jul 2012, 11:19 PM
This doesn't work..

In fact, i have that:


'panelCenter': {
render: function (panel) {
var mask = new Ext.LoadMask(panel, { msg: "Loading..." });
mask.show();
var i = 0;
this.getUsersStore().on('load', function () { i++; if (i === 2) { mask.hide(); } });
this.getApplicationsStore().on('load', function () { i++; if (i === 2) { mask.hide(); } });

panel.getEl().on('contextmenu', function (e) {
e.preventDefault();
contextMenu.show();
});

With a "contextMenu.show();" it's working, but menu appears at 0, 0.
With your code, nothing happen.

EDIT: It's the "showAt()" that doesn't work. I displayed the "coordinatesArray" and the values are good. But if i try : contextMenu.showAt(50, 50), it doesn't work either.

suzuki1100nz
15 Jul 2012, 11:41 PM
Your code example doesnt show you using e.getXY(...).
When you debug what values do you get for X and Y

Elfayer
15 Jul 2012, 11:52 PM
panel.getEl().on('contextmenu', function (e) {
e.preventDefault();
var mouseCoord = e.getXY();
alert(mouseCoord[0] + ", " + mouseCoord[1]);
contextMenu.showAt(50, 50);

I get the value of the mouse position.
This doesn't display anything.

Farish
15 Jul 2012, 11:56 PM
var position = e.getXY();
menu.showAt(position);

or simply:
menu.showAt(e.getXY());

Elfayer
15 Jul 2012, 11:58 PM
panel.getEl().on('contextmenu', function (e) {
e.preventDefault();
var mouseCoord = e.getXY();
contextMenu.showAt(mouseCoord);
});

Nothing :s

Farish
16 Jul 2012, 12:16 AM
Try this:



panel.on('itemcontextmenu', function (e) {
e.preventDefault();
var mouseCoord = e.getXY();
contextMenu.showAt(mouseCoord);
});

Elfayer
16 Jul 2012, 1:58 AM
It's worse. I just remove the "getEl()" and it doesn't display anything even only with "show".

Farish
16 Jul 2012, 2:24 AM
Did you also change the event name from contextmenu to itemcontextmenu? Which version are you using. I am using 4.0.7 and adding a context menu for a grid panel. Its working for me.

Elfayer
16 Jul 2012, 3:09 AM
37192

"itemcontextmenu" doesn't work either.

Farish
16 Jul 2012, 3:15 AM
Which Ext JS version are you using? Also post the code for your panel.

Elfayer
16 Jul 2012, 3:28 AM
Oh sorry, 4.1.0 for Ext JS.

panelCenter:

Ext.define('DSK.view.desktopCenter.panelCenter', {
extend: 'Ext.panel.Panel',
alias: 'widget.panelCenter',

html: '<img src="' + '/Content/images/basic.jpg' + '" width="100%", height="100%"/>',
items: new Ext.Img({ itemId: 'background', height: '100%', width: '100%' }),
region: 'center',
border: false,
layout: 'absolute'
})

Farish
16 Jul 2012, 3:35 AM
Hmmm. could be something changed in 4.1.0. One last thing which I can suggest is to try getView() where you are using getEl() and try it with itemcontextmenu event.

Elfayer
16 Jul 2012, 3:38 AM
In fact when I test "itemcontextmenu", it doesn't even enter in the function...

The problem comes from the "showAt", because the "e.getXY()" is working (I have the good position of the mouse), but the showAt doesn't do anything...

friend
16 Jul 2012, 4:32 AM
Using ExtJS v4.1.0, this works for me on FF 13.x, IE 9.x and Chrome 20.x:




<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<script type="text/javascript" src="extjs/ext-all-debug-w-comments.js"></script>

<script type="text/javascript">
Ext.onReady(function() {

var someMenu = Ext.create('Ext.menu.Menu', {
items: [{
text: 'Item 1'
},{
text: 'Item 2'
},{
text: 'Item 3'
}]
});

Ext.create('Ext.window.Window', {
height: 300,
layout: 'fit',
listeners: {
show: function(component, eOpts) {
component.down('#testPanel').getEl().on('contextmenu', function(e) {
e.preventDefault();
var coordinatesArray = e.getXY();
someMenu.showAt(coordinatesArray[0], coordinatesArray[1]);
});
}
},
width: 300,
items: [{
xtype: 'panel',
itemId: 'testPanel',
title: 'Test Panel',
}]
}).show();

});
</script>

</head>

<body>
</body>
</html>

Elfayer
16 Jul 2012, 6:03 AM
Yes that code is working for me too.