Results 1 to 10 of 10

Thread: get element on given position ( top left )

  1. #1

    Default get element on given position ( top left )

    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.

  2. #2
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    What are you wanting to do?

  3. #3

    Default

    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:
    Code:
    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.

  4. #4

    Default

    document.elementFromPoint(x,y)

  5. #5
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    I see the code, but what UI effect are you trying to achieve?

  6. #6

    Default

    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.

  7. #7
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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.

  8. #8
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    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.

  9. #9
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Will this do ya?

    Code:
    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;
        }
    }

  10. #10

    Default

    Yes this is it Mr. Animal....

    Thanks a lot

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •