Passing data to an event listener in an XTemplate

[francescosyd]

Hi all,

just thought I'd post a technique I use to pass data to an event listener on an XTemplate.

xTemplate

 tpl : new Ext.XTemplate(
                    '<img  class="ImageClass" dataAttributeName1="{dataAttributeValue1}" dataAttributeName2="{dataAttributeName2}" src="http://domain.com/myimage.jpg" border="0"/>')

Listener

listeners : {
                    el: {
                        click: function (ctl) {
                                var dataAttributeValue1= ctl.target.attributes['dataAttributeName1'].nodeValue;
                                var dataAttributeName2= ctl.target.attributes['dataAttributeValue2'].nodeValue;
                                
                        },
                        delegate: ".ImageClass"
                    }
            }

The values {dataAttributeValue1} and {dataAttributeValue2} will come from some JSON that you will append to the template. Eg this.tpl.append(SomeContainer, JSONitems);

[mitchellsimoens]

How well have you tested this? What happens when the JSON has double-quotes? Or do spaces in the JSON break it?

[francescosyd]

How well have you tested this? What happens when the JSON has double-quotes? Or do spaces in the JSON break it?

Hi Mitchell,

I've tested this in Chrome, Safari and mobile Safari. All work with no problems. My data is pretty straight forward but if anyone has needs to escape/encode text or JSON values then you could use an XTemplate member function. Your data can then be manipulated before being placed inline. Eg:

tpl : new Ext.XTemplate(
                    '<img  class="ImageClass" dataAttributeName1="{dataAttributeValue1:this.myFunction}" dataAttributeName2="{dataAttributeValue2:this.myFunction}" src="http://domain.com/myimage.jpg" border="0"/>',
{
    myFunction : function(val){
        return Ext.util.JSON.encode(val);
    },
});

Cheers

Francesco