PDA

View Full Version : get element on given position ( top left )



emredagli
16 Mar 2010, 8:41 AM
Hii,
Is it possible to get element (dom or Ext.Element) by given position (top left coordinates) on the viewport or body?

Thanks for your help.

Animal
16 Mar 2010, 9:05 AM
What are you wanting to do?

emredagli
16 Mar 2010, 10:10 AM
Dear Animal you are so forthright...
I need this in this case:
I want to create help tool, by masking the mouseovered elements on the viewport like that:


transparentImageEl = Ext.getBody().createChild({
tag: 'img',
src: Paths.ImagePath+'backgroundGray50x50.png',
style: 'border:1px dashed black;position:absolute;background-repeat:repeat;z-index:9001;display:none;top:0px;left:0px;filter:alpha(opacity=70);-moz-opacity:0.7;opacity:0.7;cursor:pointer;'
});

transparentImageEl.on("mousemove",function(e){
if (transparentImageElMouseovered) {
return;
}
delayedTaskTransparentImage.delay(500,function(){
transparentImageEl.dom.style.top = "5000px";
transparentImageEl.dom.style.left = "5000px";
transparentImageEl.dom.style.display="none";
});
});

transparentImageEl.on("mouseover",function(e){
transparentImageElMouseovered = true;
delayedTaskTransparentImageMouseOver.delay(300,function(){transparentImageElMouseovered = false;})
});

Ext.getCmp('mainLayout').getEl().addListener( 'mouseover', function(e){
var target;
var targetRow = e.getTarget('.x-grid3-row',50,true);
var targetButton = e.getTarget('.x-btn',50,true);
var targetPanel = e.getTarget('.x-panel-body',50,true);

if (targetButton) {
target = targetButton;
} else if (targetRow) {
target = targetRow;
} else if (targetPanel) {
target = targetPanel;
}

if (target){
transparentImageElMouseovered = true;
var region = target.getRegion();
transparentImageEl.dom.style.display="block";
transparentImageEl.dom.style.width=target.getComputedWidth()+"px";
transparentImageEl.dom.style.height=target.getComputedHeight()+"px";
transparentImageEl.dom.style.top = (region.top-1) + "px";
transparentImageEl.dom.style.left = (region.left-1) + "px";
}
});
This code seams to work but I have truble on IE.

If I get element by from x,y coordinates on mousemove eventof the "transparentImageEl", I can mask it by without hiding the "transparentImageEl".

Thanks.

emredagli
17 Mar 2010, 11:28 AM
document.elementFromPoint(x,y)

Animal
17 Mar 2010, 12:30 PM
I see the code, but what UI effect are you trying to achieve?

emredagli
17 Mar 2010, 12:53 PM
I try to show help tooltip to the all viewport elements, which are:
- panels,
- form elements,
- butoons,
- etc...
And I also try to show the reagion of the these elements to user while mouse overing these items... :">
I plan to use it also feedback.

Animal
18 Mar 2010, 12:24 AM
Show the region? I don't get what you mean.

I'm sure there's a way to do exactly what you need.

I just don't understand what you need.

Animal
18 Mar 2010, 2:08 AM
OK, rereading I think I get it.

You want to find which Component is at a position?

Easily done. Yes, document.elementFromPoint is the starting point. This gets you the lowest element in the tree which occupies that point.

But then you need to find the lowest Component in the hierarchy who's getPositionEl() (A private method, but usable) is or contains that element.

I had code to do that somewhere. I might have posted it somewhere here, or it might be at home. I'll look for it and let you know.

Animal
18 Mar 2010, 2:21 AM
Will this do ya?



Ext.ComponentFromPosition = function(x, y) {
var el = document.elementFromPoint(x, y);
while (el) {
for (var i = 0, c = Ext.ComponentMgr.all.items, l = c.length; i < l; i++) {
if (Ext.getDom(c[i].getPositionEl()) === el) {
return c[i];
}
}
el = el.parentNode;
}
}

emredagli
18 Mar 2010, 2:43 AM
Yes this is it Mr. Animal....

Thanks a lot