1. #1
    Sencha User
    Join Date
    Aug 2010
    Posts
    19
    Answers
    1
    Vote Rating
    0
    asics167 is on a distinguished road

      0  

    Default Answered: Ext.img onclick event

    Answered: Ext.img onclick event


    Hello. Iam using Architect 2 and put on Panel Image like this:
    Code:
    {
                                                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

  2. 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

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

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,111
    Answers
    678
    Vote Rating
    470
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    You could try something like:

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

  4. #3
    Sencha User
    Join Date
    Apr 2012
    Posts
    81
    Answers
    3
    Vote Rating
    0
    mice-pace is on a distinguished road

      0  

    Default


    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

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

Thread Participants: 2

Tags for this Thread