PDA

View Full Version : Calling a function inside a tpl [ ]



heaversm
17 Jun 2011, 11:28 AM
Hi - I'm new to Sencha touch and I'm trying to modify a twitter example I found online in order to turn urls from a twitter feed into clickable links. I saw that one of the examples in the sencha touch library uses a linkify feature, but I can't figure out how to incorporate it into my own project. Here's my code:


t_news = new Ext.Component({
cls:'t_news',
title:'News',
scroll: 'vertical',
tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<div class="avatar"><img src="{profile_image_url}" /></div>',
'<div class="tweet-content">',
'<h2>{from_user}</h2>',
'<p>{text:this.linkify}</p>',
'</div>',
'</div>',
'</tpl>',
]
});

function linkify(value){
return value.replace(/(http:\/\/[^\s]*)/g, "<a target=\"_blank\" href=\"$1\">$1</a>");
}



and here's the error I get:


Uncaught TypeError: Object [object Object] has no method 'linkify'

gaurav.k
16 Dec 2011, 3:53 AM
Here is a sample code,
hope it helps.


var sbTpl = new Ext.XTemplate('<tpl for=".">',
'<div class="sb-section-title">{title}</div>',
'<div class="sb-section-score">{correct} of {total} Correct &nbsp;(&nbsp;{[getPercent(values.correct,values.total)]}&nbsp;%)</div>',
'</tpl>');



" You can add any javascript code inside {[ ... ]}"

mankz
16 Dec 2011, 4:46 AM
Linkify needs to be defined on the template itself, not on the class.



tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<div class="avatar"><img src="{profile_image_url}" /></div>',
'<div class="tweet-content">',
'<h2>{from_user}</h2>',
'<p>text:{[this.linkify(values.text)]}</p>',
'</div>',
'</div>',
'</tpl>',
{
linkify : function (value){
return value.replace(/(http:\/\/[^\s]*)/g, "<a target=\"_blank\" href=\"$1\">$1</a>");
}
}
]
});