Extjs 4 : Delegating Events

Though ExtJS supports excellent event handling mechanism, sometimes we may want to handle custom events on some HTML components. For example if you want to handle hyperlink click whereas hyperlink is embedded in html code(using html tag or xtemplate), then you may need to delegate events to the component that you have created using 'delegate'. You can use simple hack to handle this.

• Create HTML text using html tag or xtemplate. 
• Assign classname/id to the component to which you want to attach an event. 
• Attache event to the Ext body and delegate to the specific class/id show in below.
• Make sure that class name or id is unique. 

Here is the fiddle to fiddle around with it.
Sample snippet

	values = [{
	id : 'v1',
	name : 'Value1'
	}, {
	id : 'v2',
	name : 'Value2'
	}, {
	id : 'v3',
	name : 'Value3'
	}, {
	id : 'v4',
	name : 'Value4'
	}, {
	id : 'v5',
	name : 'Value5'
	}];
	var tpl = new Ext.XTemplate(
	'<p>Values: ',
	'<tpl for=".">',
	'<div style="display: inline-block" data-valueid="{id}" class="values-class">{name}</div><br/>',
	'</tpl></p>');
	var panel = Ext.create('Ext.panel.Panel', {
	renderTo : Ext.getBody()
	,
	});
	tpl.overwrite(panel.body, values);
	var el = Ext.getBody();
	el.on('mouseover', function(e, t, eOpts) {
	alert(t.getAttribute('data-valueid'));
	}, this, {
	delegate : '.values-class'
	});

view raw extjs-delegate.js hosted with ❤ by GitHub