View Full Version : Create Links for Twitter Example?

23 Jul 2010, 9:24 AM
I'm fairly new to the whole DataView / Store / Reader concepts, and I was wondering how you might go about converting the twitter example to activate the links within the tweets? Is there a built-in function per chance that would allow a tie in to easily modify a single piece of the json response?


23 Jul 2010, 12:05 PM
you can use JavaScripts own replace function:

text.replace(/(http:\/\/)(.*)\s/gi, '<a href=$1$2>$1$2</a>')

I think that will work, let me know if it doesn't

23 Jul 2010, 12:08 PM
I guess I wasn't as clear... :-(

I know how to replace it, but I just don't know where i can grab the text. So where would i put that code?

23 Jul 2010, 12:16 PM
a config option for DataView is prepareData which is not in the API Docs for Touch or ExtJS.

Here is a sample that will take the data for each record in a store, get the value in the created key and format it to a date.

new Ext.DataView({
prepareData : function(data) {
data.created = Ext.util.Format.date(new Date(data.created), "m-d-Y");
return data;

23 Jul 2010, 1:05 PM
that looks very promising, except i keep getting double output of what i decide to change. so if i do:

prepareData: function(data) {
data.text = data.text + 'test';
return data;
i will get my my string back with 'testtest' appended.

Any ideas why it is doubled?

23 Jul 2010, 1:27 PM

prepareData: function(data) {
data.text = 'test';
return data;

What you were doing was taking what was in data.text and adding 'test' to it.

23 Jul 2010, 1:39 PM
that just completely replaces data.text. (which works as expected) I don't want to do that. I want to append something to it. But it appends it twice.

23 Jul 2010, 1:48 PM
Is it getting fired twice? Normally it should of course fire once. Are you loading it, refreshing, or filtering it?

23 Jul 2010, 1:56 PM
Not to my knowledge... I doing a read on the store on initComponent. But that is it. Hehe... i have no idea what is going on.

As I mentioned before, if I can do a simple replace, but for whatever reason any appending just doubles the appened value. It's not doubling the initial values.

I'm wondering if it has something to do with that prepareData function.

25 Jul 2010, 9:45 PM
I decided to try this, but I am just looping over the results and updating the text. This works but I am seeing some really odd results. The regex doesn't seem to completely work, its wrapping more text than it should

onRefresh: function(){
var twitterStore = Ext.getCmp('twitter-list').getStore();

Ext.getBody().mask(false, '<div class="loading">Loading&hellip;</div>');

url: 'http://search.twitter.com/search.json',
callbackKey: 'callback',
q: 'cfunited',
rpp: 50,
suppress_response_codes: true
callback: function(result) {
var tweets = result.

for( var i=0; i < tweets.length; i++){
tweets[i].text = tweets[i].text.replace(/(http:\/\/)(.*)\s/gi, '<a href="$1$2">$1$2</a>');



25 Jul 2010, 11:59 PM
Works good now, just replace with a non greedy match

tweets[i].text = tweets[i].text.replace(/(http:\/\/)(.*?)\s/gi, '<a href="$1$2">$1$2</a>');

19 Jun 2011, 9:34 AM
Hey guys,

thanks for the advice, prepareData also works with Ext.List in the way described.

This is what works for me:

var list = new Ext.List({
prepareData : function(data) {
data.text = data.text.replace(/(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim, '<a href="$1" target="_blank">$1</a>')
data.text = data.text.replace(/(@)([A-Za-z0-9_-]*)/gi, '<a href="http://twitter.com/$2" target="_blank">$1$2</a>')
data.text = data.text.replace(/(#)([A-Za-z0-9_-]*)/gi, '<a href="http://twitter.com/#!/search/%23$2" target="_blank">$1$2</a>')
return data;
store: app.stores.tweets,
plugins: [{
ptype: 'pullrefresh',
autoPaging: true,
loadingText: 'Lade...',
pullRefreshText: 'Aktualisiert',
releaseRefreshText: 'Loslassen...',
snappingAnimationDuration: 1000
itemTpl: [
'<div class="tweet">',
'<div class="tweet-lcol">',
'<img src="{profile_img}" />',
'<p class="tweet-date">{created_at:date("d.m.Y")}</p>',
'<p class="tweet-text tweet-rcol">{text}</p>',