PDA

View Full Version : read x and y coordinate in Panel



TAG
31 Aug 2009, 1:24 AM
Hello,
I would read the coordinate x and y in Panel where the mouse of user makes click.
I use the "getXY()" method, but this return the coordinate x and y on the page, not on the panel.
My Panel have the right and button scroll bar, when the user scroll Panel, the coordinate returned from "getXY()" method are wrong, because do not take into account the scroll panel.
I read APi doc but I have not found anything that can help me. Some have suggested?

My code now is:


....
notifyDrop : function(dd, e, data){
var selectedRecord = dd.dragData.selections[0];
var coords = e.getXY();
alert("x"+coords[0]+" y "+coords[1]);
}
....


I read the post of Animal http://extjs.com/forum/showthread.php?t=78398, but I was not useful to solve my problem.

Animal
31 Aug 2009, 1:42 AM
What's this with DD code?

A click you'd handle with a simple click event handler on the Panel's body

TAG
31 Aug 2009, 2:25 AM
I then place the event "click" on the panel and then read the coordinates with "getXY?

Animal
31 Aug 2009, 4:18 AM
IS there a click event on Panel?

No.

So Panel's body

As I told you.

TAG
31 Aug 2009, 6:00 AM
I'm Sorry. I did not understand.
I have a Panel. And in the listener of Panel, I use "active" for recall some functions. For one of these functions, I read the coordinates x and y of user click mouse, for pass them as parameters to the function.
My code is:


var AreaCentrale = new Ext.TabPanel({
id: 'contenitoreMaster',
region:'center', deferredRender:true, enableTabScroll:true, autoScroll:true, activeTab:0, split: true,
items:[{
title: 'titolo',
contentEl: 'idGenericTitoloGriglia',
iconCls: 'nuova',
closable:false,
autoScroll: true,
id: 'Genericidtitolo',
listeners: {
activate : function(){
....
var coords = e.getXY();
activeVirtualPrompt(coords[0],coords[1]);
......

}
}
}]


how should I modify this code?

TAG
31 Aug 2009, 6:00 AM
for use Panel's body?

hendricd
31 Aug 2009, 7:00 AM
@TAG -- You'll want to set a listener on the Panel's body once after the Panel is rendered. (The Component::mon method safely removes the listener (preventing memory leaks) for your when the Panel is destroyed):



var AreaCentrale = new Ext.TabPanel({
id: 'contenitoreMaster',
region:'center', deferredRender:true, enableTabScroll:true,
autoScroll:true, <- Not valid for a tabPanel
activeTab:0, split: true,
items:[{
title: 'titolo',
contentEl: 'idGenericTitoloGriglia',
iconCls: 'nuova',
closable:false,
autoScroll: true,
id: 'Genericidtitolo',
onBodyClick : function( e, target){
var coords = e.getXY();
activeVirtualPrompt(coords[0],coords[1]);
......
},
listeners: {
render : function(P){
P.mon(P.body, 'click', P.onBodyClick, P);
}
}
}]
Then, you don't have to worry about parent scrollBar offsets, since you're dealing with the body Element only.

TAG
31 Aug 2009, 7:34 AM
I update my code, with your code, but my application don't run correctly. The contentEl of Panel don't Upload the div correctly.
I insert the other event in listener in "/*" and "*/" and the code now is:


var AreaCentrale = new Ext.TabPanel({//definisco un pannello di tipo Tab
id: 'contenitoreMaster',
region:'center', deferredRender:true, enableTabScroll:true, autoScroll:true, activeTab:0, split: true,
items:[{
title: 'titolo',
contentEl: 'idGenericTitoloGriglia',
iconCls: 'nuova',
closable:false,
autoScroll: true,
id: 'Genericidtitolo',
onBodyClick : function(e,target){
var coords = e.getXY();
alert(coords[0]+' - '+ coords[1]); //to test the correct x and y
},
listeners: {

render : function(P){
P.on(P.body, 'click', P.onBodyClick, P);
}
}//chiudo listeners
}//chiudo secondo pannello
]
})

the html is


.griglia{
background-image: url("griglia.jpg");
width:8000px;
height:8000px;
overflow:visible;
}
...
<body id="DIO">
<div id="idGenericTitoloGriglia" class="griglia">
</div>
</body>
....


the CSS don't view the image. And the alert don't run......:-/

TAG
31 Aug 2009, 7:39 AM
ok, in mozzilla, don't run, in google chrome yes......compatibility problem????

TAG
31 Aug 2009, 7:43 AM
sorry,
but the coordinate x and y, not take into account the scroll ...... I have the same error above .....

hendricd
31 Aug 2009, 7:53 AM
@TAG -- Slow down just a minute. What is eventually going in the DIV idGenericTitoloGriglia?
Just the image?

If so, no need to use contentEl at all:



items:[{
title: 'titolo',
contentEl: 'idGenericTitoloGriglia',
iconCls: 'nuova',
closable:false,
autoScroll: true, //<- not needed with your CSS rule in effect
id: 'Genericidtitolo',
onBodyClick : function( e, target){
var coords = e.getXY();
activeVirtualPrompt(coords[0],coords[1]);
......
},
listeners: {
render : function(P){
P.body.addClass('griglia');
P.mon(P.body, 'click', P.onBodyClick, P);
}
}
}]
The Panel's body actually is your clickable image map.
Keep things simple.

TAG
31 Aug 2009, 8:05 AM
I have need of div for use this in other function....a long story.
I test your code in mozilla and chrome. In mozzilla, i see the windows alert, but the coordinates are wrong, in chrome i don't see the windows alert.......

Animal
31 Aug 2009, 11:03 AM
Debug then! Doug have given you a lot now! Read his free code and understand the priciple that he's shown, and take some ownership!

TAG
9 Oct 2009, 6:42 AM
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.....

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 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?