PDA

View Full Version : Is it possible to attach events to objects created within an Ext.XTemplate?



alexmcmillan
10 Apr 2014, 1:29 PM
I have a template like so:



'<tpl for=".">',
'<div class="node level{level} {type}" contenteditable="true">',
'<div class="dragHandle"></div>',
'<div class="content">',
'<tpl for="chunks">',
'<span>{value}</span><br />',
'</tpl>',
'</div>',
'</div>',
'</tpl>'


This is within an Ext.view.View with alias 'widget.document' and id 'document'.

Is it possible to have a handler on events created by this template? I need to handle keyup events inside the contenteditable divs, but I can't seem to get it to work.

Specifying in the Document controller:



this.control({
'document': {
render: this.onRender
},
'document div.node *': {
keyup: this.onNodeKeyup
}
});


results in the onRender being fired, but never the keyup no matter what selector I put there.

bobringer
10 Apr 2014, 2:47 PM
Alex,

You can't attach listeners to those content editable divs since they aren't actually Ext elements.

Event delegates are the easiest way to handle this. Delegates allow you to place a listener on an Ext element that is only actually triggered when the event is performed on a DOM element matching the selector in the "delegate" config.

For more about using this technique (and many more of its benefits), see this fairly old blog post about event delegation in sencha touch: https://www.sencha.com/blog/event-delegation-in-sencha-touch/

Fortunately for us... this is still a great technique for ExtJS applications as well many years later.

In this example, I've placed your template in a regular panel, but the concept is the same as with a data view.

50a

alexmcmillan
10 Apr 2014, 6:36 PM
test