View Full Version : Using member functions to render the complex content

22 Dec 2011, 10:49 AM
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" />',
'<strong> {this.formatPrice(price)}</strong>',
'<span class="name">{name}</span>',
'<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?

22 Dec 2011, 11:24 AM
You need to surround it with square brackets:

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

23 Dec 2011, 6:25 AM
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)]}