Geek asks and answers

Built-in Variables in Ext.XTemplate

Hi, I am using sencha touch 2 and have some problems with Ext.XTemplate.

When I use the following pattern and it works correctly:

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 to use the variable 'Current location'in the template, but it does not work correctly ( {\'Current location\':this.tr}returns an 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 to use this.tr(currentLocation)both this.tr(\'Current location\')instead of currentLocation:this.trand \'Current location\':this.tr, but then return the pattern <div title="in both cases.

Can someone explain what I'm doing wrong and how can I solve my problem?

+3
source share
1 answer

, , . Ext.XTemplate. , :

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());
+3

More articles:


All Articles