getting relative X and Y coordinates

[radtad]

I'm using an override for Ext.Panel from this thread:
http://www.extjs.com/forum/showthrea...0image%20panel

What I want to do is get the X and Y coordinates relative to the picture, not the page coordinates. Is there any way to do this in ExtJS? I've looked through the docs, but I'll I seem to find is page coordinates, not relative coordinates. I can write something, but I figured this would be around somewhere in Ext. Here is the code I'm using.

    var div  = document.createElement('DIV');
    div.id   = 'map-image-container';

    var image = document.createElement('IMG');
    image.src = 'map0.jpg';
    image.id  = 'map-image';
    setImageSize(image,zoom);

    div.appendChild(image);

    var mappanelimage = new Ext.ux.PanPanel({
        border: false,
        id: 'map',
        client: div,
        listeners: {
            render: function(mappanel) {
                new Ext.Resizable(mappanel.getEl(), {
                    pinned: true,
                    transparent: true,
                    resizeElement: function() {
                        var box = this.proxy.getBox();
                        mappanel.updateBox(box);
                        if (mappanel.layout) {
                            mappanel.doLayout();
                        }
                        return box;
                    }
                });
                mappanel.mon(mappanel.body, 'click', mappanel.onBodyClick, mappanel);
            },
        },
        onBodyClick : function( e, target){
             // obviously this part returns the page coordinates when i need to 
             // return the relative coords to the image
             var coords = e.getXY();
             console.log('x: '+coords[0]+', y: '+coords[1]);
        }
    });

[BlueCamel]

[QUOTE=radtad;457914]
What I want to do is get the X and Y coordinates relative to the picture, not the page coordinates.

You know the click X and Y position. If you know the X and Y position of the picture you should be able to calculate the click X/Y position relative to the image.

So, not entirely sure what you're doing here. Is this the X/Y position of the click on the image regardless of where the image is in the browser? I had to recently do the same, but only for the X position, not Y.

// add a new click handler to this div
el = Ext.get("my-div");
el.on('click', function(e, div, o){

    // used to calculate the click position on the div
    var x = {
        click: e.getXY()[0],
        pos: el.getLeft(),
        scroll: el.getScroll().left
    };

    var click = (x.click - x.pos) + x.scroll;
    
});

The key here is to calculate the position of the click relative to the image position and to take into account the scroll position of the container for the image.

[radtad]

Hey BlueCamel, thanks for the reply. That might work what you have there. What I'm doing with this is trying to have a seating map within a building. So if I click on the map, that is where I'd like to insert a seat. So this is why I would want the X and Y relative to the map image itself. Here is what I did that works (might be better another way like yours):

        onBodyClick : function( e, target){
                var coords = e.getXY();
                var map     = Ext.get('map');
                var left    = parseInt(map.getLeft());
                var top     = parseInt(map.getTop());
                var img     = Ext.get('map-image-container');
                var imgleft = left - img.getLeft();
                var imgtop  = top - img.getTop();

                var x = parseInt(coords[0]) - left + imgleft;
                var y = parseInt(coords[1]) - top + imgtop;
                addSeat(x,y);
            }
        }

So basically what I did is get image 'map' top and left, subtract if from the page X and Y. This gives me my starting point. Then I add whatever I've dragged from the image 'map-image-container left and top. This gives me the appropriate relative coordinates to the image. Hopefully this makes sense. I was hoping there would be something in Ext that would already do this.

[Animal]

That's what Element.getOffsetsTo does.

[radtad]

Thanks for the reply Animal. I'm not sure if this will work with the code though. The click event that is being fired returns an Ext.EventObject and the target HTML Element. The target is great I can definitely use that. But how do I get the click point using getOffsetsTo? The only way to do that is to use the EventObject being returned correct? Maybe I'm doing something wrong because it seems to be returning x: 0 and y: 0 all the time assuming because it doesn't know the click point. Any suggestions would be great.

[Animal]

The event contains point information.

Not if you attempt to debug the handler though! This is a gotcha of event processing and debugging. Catch a click event, your debugger breaks, nove the cursor one pixel, and the event has changed to a mousemove. Move it out of the current element, and its a mouseout.