PDA

View Full Version : Create Links for Twitter Example?



uxdan
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?

Thanks!

mitchellsimoens
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

uxdan
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?

mitchellsimoens
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;
}
})

uxdan
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?

mitchellsimoens
23 Jul 2010, 1:27 PM
try


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

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

uxdan
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.

mitchellsimoens
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?

uxdan
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.

danvega
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>');

Ext.util.JSONP.request({
url: 'http://search.twitter.com/search.json',
callbackKey: 'callback',
params:{
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>');
}

twitterStore.loadData(tweets);
Ext.getBody().unmask();
}
});

},

danvega
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>');

trainxl
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>',
'</div>',
'<p class="tweet-text tweet-rcol">{text}</p>',
'</div>'
]
})