Results 1 to 3 of 3

Thread: image-map event handling

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    28
    Vote Rating
    0
      0  

    Default image-map event handling

    Can anyone suggest image-map event handling? I am trying to bind an event with "circle" and "poly" as given in the initControl() given below but it doesn't work. Any examples? Please note following code is just for understanding.




    Ext.define('Test.view.common.Map', {
    extend: 'Ext.panel.Panel',
    initComponent: function() {
    Ext.apply(me, {
    items: [
    {
    xtype:'panel',
    itemId: 'mpanel',
    width: 502,
    height: 422,
    html: me.getHtml(),
    items: [
    {
    xtype: 'image',
    itemId: 'mitemid',
    width: 500,
    height: 420,
    src: mapurl,
    style: {
    position: 'absolute'
    }
    },
    {
    xtype: 'image',
    itemId: 'cmdCompass',
    src: '../images/directional.gif',
    width: 65,
    height: 65,
    cls: 'gis-compass',
    useMap: 'imagemap',
    }
    }
    }
    },

    getHtml: function() {
    return "<map name=\"imagemap\" id=\"imagemap\">" +
    "<area shape=\"circle\" action=\"zoomfull\" coords=\"32,32,10\" href=\"javascript:void(0);\" />" +
    "<area shape=\"poly\" action=\"pannorth\" coords=\"31,0,39,14,24,14\" href=\"javascript:void(0);\" />" +
    "<area shape=\"poly\" action=\"paneast\" coords=\"64,31,50,39,50,24\" href=\"javascript:void(0);\" />" +
    "</map>";
    },




    initControl: function() {
    this.mappanel.el.on({
    mousemove: this.getMouse,
    mousedown: this.mTool,
    mouseup: this.chkMouseUp,
    dblclick: this.fPline,
    mousewheel: this.wheel,
    contextmenu: this.handleRightClick,
    scope: this
    });

    var vAreas = Ext.query('area');
    for (var i = 0, len = vAreas.length; i < len; i++) {
    if (vAreas[i].shape == 'circle') {
    Ext.fly(vAreas[i]).on('click', this.circleAction);
    } else {
    Ext.fly(vAreas[i]).on('click', this.areaAction);
    }
    }
    }
    }

  2. #2
    Sencha User slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,165
    Answers
    505
    Vote Rating
    255
      0  

    Default

    Using a listener on the document body (or any component / element you want to limit the listening scope to) you can listen to click events happening on any tag including area.

    Using the below example you can see that I've got a listeners for click set on the body element (you could scope that to a single image or whatever made sense in your own use case) and I've got a delegate listening for clicks just on <area> tags - so one listener for all tags - more efficient than setting up individual listeners on all html elements you want to listen for clicks on.

    From there you an inspect the element you clicked on. Likely you'd want one area to do one thing and another area to do another and this way you can check out the element's ID or some other attribute you put on the area tag to be able to tell one from another.

    HTML
    Code:
    <body>
        <img id="Sencha-Image" src="http://nhousestudios.com/wp-content/uploads/2012/10/logo-sencha.jpeg" usemap="#Sencha-Image-Map" border="0" width="500" height="267" alt="" />
        <map id="Sencha-image-map" name="Sencha-Image-Map">
            <area shape="rect" coords="88,61,194,207" href="#" alt="" title=""    />
        </map>
    </body>
    Ext JS
    Code:
    Ext.getBody().on({
        click: function (e) {
            console.log(Ext.fly(e.getTarget()));
        },
        delegate: 'area'
    });

  3. #3
    Sencha User
    Join Date
    Feb 2015
    Posts
    1
    Vote Rating
    0
      0  

    Default

    Ext.getBody().on({ click: function (e) { console.log(Ext.fly(e.getTarget())); }, delegate: 'area'});thanks for this code @slemmon
    But how can I register this event listener in Controller's "control()" method.
    Because When I register this event in init() of controller I am not getting reference of other components.So can you please help me in this.I want something like this



    Ext.define('TRS.controller.TRSMainController', {
    extend: 'Ext.app.Controller',],

    refs: [
    {ref: 'menuMain', selector: 'menumain'},
    {ref: 'contentPanel', selector: 'contentpanel'},
    {ref: 'reportMainTab', selector: 'reportmaintab'},
    {ref: 'screen', selector: 'Ext.getBody()'}
    ],
    views:['ContentPanel'],
    models: ['EntityMainTabBacking', 'bankRoutingCodesModel', 'BankContactsModel'],

    inited: false,

    init: function () {
    var me=this;

    this.control({
    'contentpanel': {
    openlayout: this.openLayoutHandler
    },

    'Ext.getBody()': {
    click: function (e,m) {
    console.log(Ext.fly(e.getTarget()));
    var areaTag=Ext.get(e.getTarget()),
    country=areaTag.dom.title,
    countryStore=Ext.getStore('account.MarketStore'),
    countryRecord=countryStore.findRecord('value',country),
    countrykey=countryRecord.data.key,
    cmp=me.getContentPanel(),
    leftpanleobj= Ext.create('TRS.view.common.dashboardLeftPanel');
    leftpanleobj.reloadPieCharts(cmp);




    },
    delegate: 'area'
    }

    });

Tags for this Thread

Posting Permissions

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