Inline variables in Ext.XTemplate

Question

Hi I use sencha touch 2 and have some problems with Ext.XTemplate.

When I use next template and it work right:

var template = new Ext.XTemplate(
    '<div title="{currentLocation:this.tr}">',
        '<img src="styles/css/img/locate.png" height="30px" width="30px" />',
    '</div>',
    {
        compiled: true,
        tr: function(value) {
            return 'translated ' + value;
        }
    }
);

template.apply({currentLoaction: 'Current location'});

<div title="Current Location">
    <img src="styles/css/img/locate.png" height="30px" width="30px" />
</div>

But I prefer set 'Current location' variable in template, but it doesn't work right ({\'Current location\':this.tr} return empty value):

var template = new Ext.XTemplate(
    '<div title="{\'Current location\':this.tr}">',
        '<img src="styles/css/img/locate.png" height="30px" width="30px" />',
    '</div>',
    {
        compiled: true,
        tr: function(value) {
            return 'translated ' + value;
        }
    }
);

template.apply();

<div title="">
    <img src="styles/css/img/locate.png" height="30px" width="30px" />
</div>

I try use this.tr(currentLocation) and this.tr(\'Current location\') instead currentLocation:this.tr and \'Current location\':this.tr, but then template return <div title=" in both cases.

Can anybody explain what I doing wrong and how I can resolve my problem?

Answer 1

Arbitrary code can be executed if enclosed in square brackets, see Ext.XTemplate. So in your example:

var template = new Ext.XTemplate(
    '<div title="{[this.tr(\'Current location\')]}">',
        '<img src="styles/css/img/locate.png" height="30px" width="30px" />',
    '</div>',
    {
        compiled: true,
        tr: function(value) {
            return 'translated [' + value + ']';
        }
    }
);

document.write(template.apply());