Using member functions to render the complex content

[KJedi]

I need a component that shows info about offer. The best way i can thin of is to subclass the panel, create a template and set data for the panel. I achieved all that, but the template is not working as I'd like it to:

new Ext.XTemplate(
	'<img src="{this.getImageUrl(images)}" width="120" height="120" />',
	'<div>',
		'<strong>€ {this.formatPrice(price)}</strong>',
		'<span class="name">{name}</span>',
		'<p>{description}</p>',
	'</div>',
	'<div class="info">',
		'<span class="type">{this.renderType(isOffer, isPrivate)}</span>',
		'<span class="type">{this.renderDistance(distance)}</span>',
	'</div>', {
		getImageUrl: function (images) {
			return CJ.constants.DEFAULT_DEAL_IMAGE;
		},
		formatPrice: function (price) {
			return price;
		},
		renderType: function (isOffer, isPrivate) {
			if (isPrivate == 'false') {
				return CJ.t('Business deal')
			}
			if (isOffer == 'true') {
				return CJ.t('Offer');
			}
			return CJ.t('Search');
		},
		renderDistance: function (dist) {
			return (dist - 0) + 'm';
		}
	})

However it does not understand that I actually want to call a member function, not get the value if this.something variable.

Is there a way to make it work as I want it to?

[mitchellsimoens]

You need to surround it with square brackets:

{[this.renderType(isOffer, isPrivate)]}

[KJedi]

Is there any official documentation where I can see these options?
I read everything about XTemplate, but did not find that.
Also there is a problem in the code above. If you're passing values as parameter, you should use

{[this.renderType(values.isOffer, values.isPrivate)]}

instead of

{[this.renderType(isOffer, isPrivate)]}