Ext.img onclick event

[asics167]

Hello. Iam using Architect 2 and put on Panel Image like this:

{
                                            xtype: 'panel',
                                            title: 'shema',
                                            dockedItems: [
                                                {
                                                    xtype: 'image',
                                                    dock: 'top',
                                                    height: 697,
                                                    id: 'Shema5',
                                                    itemId: 'Shema5',
                                                    width: 201,
                                                    src: 'image/schemaf5.jpg'
                                                }
                                            ]
                                        }

1.how to add from Architect listeners for click method om Image? and it is possible get X and Y coordinates cursor from left,top corner of image?

2. it is possible add functional like html tag "map" and "area" to this image.

Thanks. My english bad

[scottmartin]

You could try something like:

listeners: {
	click: {
		element: 'el',
		fn: function(){
		}	
	}   
}

Scott.

[mice-pace]

if all you want to do is do a regular html link on click ScottMartin is right on the money, in the middle of the function (it effectively acts like an onClick) you can just put code to redirect the browser

listeners: {
    click: {
        element: 'el',
        fn: function(){
             window.location = "http://www.google.com/";
        }
    }
 }

...If you want Mapping though it gets complicated. Unless there's an easy way (if there is i wouldn't know about it) you can fetch the mouse's position, and use Ext.Img's getPosition function to determine where the image starts... From that you can deduce the offset (how far from the start of the image) the mouse is, and manually code in specific conditions

(Basically, take the X of the cursor, subtract the X position of the image and the result is how far allong the image's X axis your cursor is... Do the same for the Y and then check if they are inside a specific range to check if they are inside a certain box co-ordinates)