PDA

View Full Version : Problem to read the coordinate of the mouse in the html DIV in a Panel



TAG
9 Oct 2009, 2:59 AM
Hello,
I have a hard problem. I have a html DIV. I insert this DIV in a Panel. The DIV have the attributes "width" and "height" very large(<DIV width="5000" height="5000">).When user click mouse in the DIV, I would read the coordinate x and y, where x is the distance from the left border of the DIV(insert in a panel) and y is the distance from the top border of the DIV(insert in a Panel). I read the API doc and use "getXY()" but this read the coordinate of click in a Panel not in a DIV in a Panel.....

I use the suggestion in the link http://www.extjs.com/forum/showthread.php?t=79091 but I haven't good result.

The html code is:


...
<body id="DIO">
<div id="idGenericTitoloGriglia" class="griglia">
<div id="obj_div" class="griglia">

</div>
</div>
</body>
...


the CSS code is:


.griglia{
background-image: url("../images/griglia.jpg");
width:8000px;
height:8000px;
overflow:visible;
}



The EXT code is:



var AreaCentrale = new Ext.TabPanel({
id: 'contenitoreMaster',
items:[{
title: 'titolo',
contentEl: 'idGenericTitoloGriglia',
id: 'Genericidtitolo',
listeners: {
activate: function(e){
var coords = e.getXY();
alert('x: '+coords[0]+' y: '+coords[1]);
}
}
} ]
})


And I use the code of the post: http://www.extjs.com/forum/showthread.php?t=79091 but I haven't good result...



...
items:[{
title: 'titolo',
contentEl: 'idGenericTitoloGriglia',
id: 'Genericidtitolo',
onBodyClick : function( e, target){
var coords = e.getXY();
alert('x: '+coords[0]+' y: '+coords[1]);
},
listeners: {
render : function(P){
P.mon(P.body, 'click', P.onBodyClick, P);
}
}
}]


this second code don't show the class CSS that I insert in a DIV, and return me the wrong coordinate x and y (the coordinate are on the Panel, not the DIV).....I must use the DIV for other reasons and I can't erase the DIV....

Anyone know tell me a solution or work around?

Condor
9 Oct 2009, 3:39 AM
Then why did you attach the event handler body and not to your element?

Ext.get('obj_div').on('click', p.onBodyClick, p);

TAG
9 Oct 2009, 7:40 AM
Because I create the Panel and the DIV a run-time, and I gnerate the id of DIV and id of Panel a run-time.
I must read the coordinate through the listeners(and if possible with 'active' event)

TAG
9 Oct 2009, 7:44 AM
Practically I generate the HTML code through "innerHTML" and I generate Ext.Panel on this DIV, after I insert other html code in the DIV associate with EXT.Panel.
I would read the coordinate of click mouse in this DIV.
I generate this code next user D&D an Object in a particular GUI area....

TAG
9 Oct 2009, 8:32 AM
uhm....Ok, I use your solution but the coordinate are relating to panel....the DIV that I would read isn't id="obj_div", but is id="idGenericTitoloGriglia".

Rearrange ideas:
The HTML is:


...
<body id="DIO">
<div id="idGenericTitoloGriglia" class="griglia">

</div>
</body>
...

and the CSS is:



.griglia{
background-image: url("../images/griglia.jpg");
width:8000px;
height:8000px;
overflow:visible;


and Ext code:


items:[{
title: 'titolo',
contentEl: 'idGenericTitoloGriglia',
id: 'Genericidtitolo',
onBodyClick : function( e, target){
var coords = e.getXY();
alert('x: '+coords[0]+' y: '+coords[1]);
},
listeners: {
render : function(P){
Ext.get('idGenericTitoloGriglia').on('click', p.onBodyClick, p); }
}
}]
}

This code read the coordinate, but when I move the scroll bar on the Panel, the coordinate are relative to Panel and not to Panel + scroll....

TAG
9 Oct 2009, 8:35 AM
uhm....Ok, I use your solution but the coordinate are relating to panel....the DIV that I would read isn't id="obj_div", but is id="idGenericTitoloGriglia".

Rearrange ideas:
The HTML is:


...
<body id="DIO">
<div id="idGenericTitoloGriglia" class="griglia">

</div>
</body>
...and the CSS is:



.griglia{
background-image: url("../images/griglia.jpg");
width:8000px;
height:8000px;
overflow:visible;
and Ext code:



items:[{
title: 'titolo',
contentEl: 'idGenericTitoloGriglia',
id: 'Genericidtitolo',
onBodyClick : function( e, target){
var coords = e.getXY();
alert('x: '+coords[0]+' y: '+coords[1]);
},
listeners: {
render : function(P){
Ext.get('idGenericTitoloGriglia').on('click', p.onBodyClick, p); }
}
}]
}
This code read the coordinate, but when I move the scroll bar on the Panel, the coordinate are relative to Panel and not to Panel + scroll....:((

(sorry but I read the Ext code in JSP code, and I am interpreting the code step by step.....)

TAG
12 Oct 2009, 2:37 AM
ops...
I put the same message twice