PDA

View Full Version : image-map event handling



bforbhavin
21 Jun 2013, 9:48 AM
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);
}
}
}
}

slemmon
24 Jun 2013, 12:52 PM
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


<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


Ext.getBody().on({
click: function (e) {
console.log(Ext.fly(e.getTarget()));
},
delegate: 'area'
});

jodishwaran
27 Apr 2015, 12:53 AM
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'
}

});